Welcome to the VanDyke Software Forums

Join the discussion today!


Go Back   VanDyke Software Forums > Scripting

Reply
 
Thread Tools Rate Thread Display Modes
  #1  
Old 07-17-2013, 06:59 AM
re210m re210m is offline
Registered User
 
Join Date: May 2013
Posts: 4
Post Building Custom Forms with Javascript

Hi everyone,

I'm trying to build custom forms using the Internet Explorer object, but I'd like to be able to use JavaScript in the form. I'm trying to use the buttonhandler example from section 6.3 of the VanDyke Scripting guide as a basis. I've tried a couple of different methods and so far, nothing works.

Using the objIE.document.body.innerHTML doesn't allow for the addition of <script> tags in the head to include the needed JavaScript libraries, so I've tried both of the following alternatives:

Building the webpage form using objIE.document.write (and including everything from the <head> and <body>) causes any <script> tags to be ignored. Button presses are still passed back to the VBScript from which it was launched, but there's no ability to have a dynamic page as the JavaScript doesn't load.

I've built the page into a index.html document that I can use with objIE.navigate "<path>/index.html", but this doesn't allow button presses from the buttonhandler to be referred back to the VBScript from which it was launched. I know the buttonhandler from the example is waiting for objIE.Document.All("ButtonHandler").Value, which in this case is irrelevant since the document object is empty.


Is there something I'm missing on one of these methods, or can anyone recommend a workaround? My ultimate goal is to build a tabbed user experience, with each JavaScript tab on the page containing buttons the user can press. Any help is greatly appreciated. Thanks!!
Reply With Quote
  #2  
Old 07-17-2013, 07:33 AM
re210m re210m is offline
Registered User
 
Join Date: May 2013
Posts: 4
Unhappy

Sorry for posting twice. I didn't see the message about waiting for admin approval the first time, and now I don't have an edit button to remove the second post.
Reply With Quote
  #3  
Old 07-17-2013, 10:02 AM
rtb rtb is offline
VanDyke Technical Support
 
Join Date: Aug 2008
Posts: 4,306
Hi re210m,

No problem about the multiple posts. The questions you are asking are specific to Internet Explorer, Dynamic HTML and JavaScript.

The only idea that comes to mind would be to use a .hta file as the basis of your form so that you don't have to inject code into the document. Doing a quick internet search for ".hta form" might yield some helpful information. However, even if you find information on using .hta, we are not sure how you would tie that into a SecureCRT script. You would probably need to do a good deal of experimentation and research to get this to work.

To the forum community: does anyone have information that might help re210m's question?
__________________
--Todd

VanDyke Software
Technical Support
support@vandyke.com
505-332-5730
Reply With Quote
  #4  
Old 07-17-2013, 12:20 PM
re210m re210m is offline
Registered User
 
Join Date: May 2013
Posts: 4
Lightbulb Not a script issue?

So, maybe it's not a script issue. I've used objIE.document.write to the write the following code, and it executes with the lightbulb image change on click successfully:

Code:
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="http://www.w3schools.com/js/pic_bulboff.gif";
  }
else
  {
  element.src="http://www.w3schools.com/js/pic_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()"
src="http://www.w3schools.com/js/pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light</p>
<input name=ButtonHandler value="Nothing Clicked Yet" type=hidden >

This led me to suspect the problem may be the links to the anchors and not the script. I've tried the following, very basic code which results in a blank page when the link is clicked:

Code:
<a href="#hop">Visit end of the document!</a> 

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<a id="hop">TEST!</a>
This likely explains why tabs won't work, as each tab tries to display a content section based on an ID. These findings are helping me to narrow down the issue, but I'm afraid I'm stuck once again.

Last edited by re210m; 07-17-2013 at 12:28 PM.
Reply With Quote
  #5  
Old 07-17-2013, 01:38 PM
rtb rtb is offline
VanDyke Technical Support
 
Join Date: Aug 2008
Posts: 4,306
Thanks for the update re210m.

Feel free to post the solution once you find it.
__________________
--Todd

VanDyke Software
Technical Support
support@vandyke.com
505-332-5730
Reply With Quote
  #6  
Old 07-18-2013, 06:27 AM
re210m re210m is offline
Registered User
 
Join Date: May 2013
Posts: 4
Thumbs up Workaround

So, I couldn't get any type of link anchors within the document to work. They all bring you to a blank page, so I tried to find a way to make dynamic content without it.So, I couldn't get any type of link anchors within the document to work. They all bring you to a blank page, so I tried to find a way to make dynamic content without it.

My solution was to create all the content in divs and put buttons at the top. Each button calls a JavaScript that sets the Style of all divs to not display and sets the style of the corresponding div to be inline. This effectively hides all other divs except for that button's div.



Code:
<!DOCTYPE html>
<html>
<body>

<div> <!-- Start of Content Div -->
		
<img width="450px" height="108px" style="margin:0px; display:block; position:relative; top:5px;" src="http://<ABSOLUTEPATH>.com/header.png" alt="Header" />
		
<div style="background-color:white; width:450px; text-align:center; margin-top:0px;"> <!-- Start of Div that holds the buttons and script table. -->
		
<br> <h2>Select script type: </h2> 
<button onClick="setSCRIPTStoTAB1()">TAB1</button> &nbsp; &nbsp;
<button onClick="setSCRIPTStoTAB2()">TAB2</button> &nbsp; &nbsp;
<button onClick="setSCRIPTStoTAB3()">TAB3</button> &nbsp; &nbsp; 
<button onClick="setSCRIPTStoTAB4()">TAB4</button> <br>
		
<div id="TAB1TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB1 TABLE! -->
<br>

<table style="margin-left:10px; margin-right:10px">	
<tr>
<td style="padding-right:10px"><button name=SCRIPT1 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT1";>SCRIPT1</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>	
</tr>
		
<tr>
<td style="padding-right:10px"><button name=SCRIPT2 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT2";>SCRIPT2</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>	
</tr>
		
<tr>
<td style="padding-right:10px"><button name=SCRIPT3 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT3";>SCRIPT3</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>	
</tr>
		
<tr>
<td style="padding-right:10px"><button name=SCRIPT4 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT4";>SCRIPT4</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>	
</tr>
</table> <br>
</div><!-- End of the DIV that holds JUST THE TAB1TABLE! -->
		
<div id="TAB2TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB2 TABLE! -->
<br>TAB2 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
		
<div id="TAB3TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB3 TABLE! -->
<br>TAB3 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
		
<div id="TAB4TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB4 TABLE! -->
<br>TAB4 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
		
<input name=ButtonHandler value="Nothing Clicked Yet" type=hidden >
</div> <!-- End of Div that holds the buttons and script table.. -->
</div> <!-- End of Content Div -->

<script>
function setSCRIPTStoTAB1()
{
document.getElementById("TAB1TABLEDIV").style.display="inline";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="none";
}

function setSCRIPTStoTAB2()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="inline";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="none";
}

function setSCRIPTStoTAB3()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="inline";
document.getElementById("TAB4TABLEDIV").style.display="none";
}

function setSCRIPTStoTAB4()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="inline";
}
</script>

</body>
</html>
Reply With Quote
Reply

Tags
buttonhandler , form , javascript , objie , tabs


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -6. The time now is 04:37 PM.