Accessing template fields via javascript

I am running TeamSite 5.5.2 on AIX.

I have working javascript that I want to run against the fields on my template. However, I am having trouble getting a handle on the html "form" in the template, so that I can then access that form's elements.

The end result I'm looking for is fairly complicated, but I can boil it down to a simple example, and if someone can tell me how to do this example, I can use the same logic to do what I need.

The simple example is... show me how to display the value of a text field in an alert box without using any of the FormAPI commands (such as getValue())

Typically this would be done with something like this:

alert (document.forms['myform'].element['myelement'].value);

For the "myelement" part, I know the TeamSite-generated "name" of the element I want because I can see it when I view the source html for the form.

As for the "myform" part, the source html shows that the only form in the frame is "dcreditForm", but when I plug those values in, I get undefined results. I then tried to display the number of forms present on the frame with this:

alert (document.forms.length);

but the result of that is zero, although I would expect it to be one (for dcreditForm). I don't understand why that form is inaccessible.

I tried chasing down the parent and sibling frames and determined that the frame that contains the input fields is called "formframe", so I tried approaching it from the topmost level with something like this:

alert (top._dcWin.frames["formframe"].document.forms.length);

but that gives me a result of zero as well.

There's got to be something I am missing here in terms of frames, parents, forms, or something. Or maybe the "onload" in formframe's body tag is throwing it all off.

Can somebody help me with the syntax required to access these fields?

Also, if anyone is interested in what my real goal is here (remember, the display of the value was just an example), I'll be glad to post more information.

Find more posts tagged with

Comments

JonathonG

I gues I'm confused about why you don't want to use FormAPI. Even if you figure out how to make it work without FormAPI, the next upgrade will move than likely break your code. I find that it's best to hack around with JavaScript only where there is no FormAPI function.

Perhaps you could explain further?

Jonathon
Independent Interwoven Contractor

skbaker

I can understand your confusion. I'll be glad to explain my real purpose. I was just trying to spare everyone the details.

The problem is that there is no FormAPI function for what I really want to do, which is to dynamically change the size of a listbox depending on the number of values in that listbox. What I need is a "setSize" function that I can call on the listbox, but no such function exists. Therefore, I am searching for a javascript solution.

I have gotten a working sample of JavaScript code that dynamically changes the size of a listbox with a call like this:

document.forms[0].elements['myelement'].size=3;

As I described initially, I am able to get the name of the element, but I can't seem to get the form reference to work. That is where I ended up with my original post -- at this point I'm just trying to reference something in the form.

Now you might be wondering why I need to change the size of the listbox dynamically. My listboxes in particular are populated via function in a callout button. Because we always want the user to use the callout button (and not select and de-select items in the listbox), we have made the listbox read-only on the template. The problem with that is that the read-only makes the scrollbar non-functioning, so the user has no way of quickly seeing the options he has selected. Therefore we're trying to resolve this by dynamically changing the size of the listbox based on the number of items selected in the callout.

I would of course prefer a FormAPI solution to this, so if you have any leads there, I'd love to hear them. Perhaps I should have posted the problem from that direction first.

JonathonG

Ok, that makes more sense. As I posted my initial response, I had a thought that you might be needing something like this, but had to ask anyway Smiley Happy

Based on something I've done, and what you've posted, maybe this would work:

top.frames["formframe"].document.forms.length

I used something similar to access the frame containing all of the buttons (that frame's name is datacapture_buttonframe).

Jonathon
Independent Interwoven Contractor

skbaker

I tried the command you suggested, and I get the same "zero" result, indicating that there are no forms in that document. This is almost the same as the command I had previously tried, which was:

alert (top._dcWin.frames["formframe"].document.forms.length);

So, that's at least three different ways of successfully referencing the current document and checking for the number of forms, but they all show zero forms, even though the frame itself has this in the source HTML:

<form name="dcreditForm" action="" method="post" onsubmit="return false;">

followed by all of the input fields. So I don't understand why the form is not being recognized, unless I am somehow not really in the formframe like I think I am.

If you want to grasp at straws, I have two possible ones: First, I have my javascript in a .js file that is included at the end of my datacapture.cfg (rather than coded within the .cfg itself). That doesn't seem like it would matter, though. The second thing is that at the beginning of the formframe source, I see the following:

<body onLoad="datacapture.handleFormLoad();top._dcWin.closeOpener();" onUnload="datacapture.handleFormUnload();">

and I have no idea what this function is doing. I can't find it in any of the source, and I wouldn't expect it to affect the dcreditForm, but something is...

JonathonG

So, are you executing this code in response to some event? Or do you just have it execute immediately on the form loading?

If it's the second, you may need to add a delay. Here's a bit of code that I did for accessing the button frame:


var buttonframe = top.frames["datacapture_buttonframe"];
var loc = new String(unescape(buttonframe.location));

var re = /blank\.html/;
if (loc.match(re) || (buttonframe.document.links.length == 0))
{
       // Give the button frame a chance to load.
        window.setTimeout('hideButtons()',120); 
        return;
}

Jonathon
Independent Interwoven Contractor

skbaker

I was in fact testing the code immediately on form load. I modified my code so that it triggered on an event, and I am able to get a "1" when I ask for the number of forms (I haven't gone further than that yet), so that is progress!

Most of the listbox resizing I will need to do will be in response to an event, but I need to also resize in the initial load, so that the user can see all options for a previously-saved DCR. So, I need to figure out how to do this on form load.

I tried your code, but the "if" statement (or some portion of it) is breaking. I'm still working on it to see if I can work it out, but I don't think I'm comfortable with the delay of 120 (seconds?), or any other number, for that matter, because I don't know how long it will take the form to load, and I don't want the user to have to wait longer than he needs to. Any other suggestions?

skbaker

I got a little farther. I ignored the "if" statement and just put the setTimeout in place, to give the form a chance to load. I made a 20 second delay (I figured out that the '120' was milliseconds):

window.setTimeout('alert (document.forms.length)',20000);

The form finished drawing, and after the 20 second delay (which seemed like more than long enough), I still got a result of 0. So it looks like the <form> doesn't exist (or at least isn't accessible) until the page loads *completely*.

JonathonG

That's where you need the if statement. You may have to wait a couple of times, which is what I discovered.

As for why it's breaking, its probably because the second half of the if is specific to the button frame. You need to check something that is specific to the frame you're waiting on. In this case, you could probably check document.forms.length for a non-zero value.

As for the length of the timeout: I played around with that quite a bit. I was trying to find a balance between waiting too long and calling the function too many times. At one point, I think I had it set at 1 millisecond and the function still only got called 2-3 times. I think the important part is giving control back to the form to let it continue to load. I'm really not sure how the whole setTimeout mechanism is implemented in IE.

One caveat: There did appear to be some times when this code would not work. I could never pin it down because it would happen once every couple of weeks...and only once. If you closed and re-opened the template, the code worked fine. So, I'm not sure what was happening, but my customer was willing to live with it given how infrequently it happened.

Jonathon
Independent Interwoven Contractor

skbaker

I think the key difference in your efforts and mine is that in your code (which is run from formframe), you were waiting on the completed loading of the buttonframe. Since they are two different frames, you are able to wait a little while and then access buttonframe. However, for my code, I am waiting on completion of the formframe, which is the same frame in which I am executing the code. The frame won't be complete until all the code executes, and the code won't be done until my timeout is done. So, I believe this is one of those chicken-and-egg situations and I'll never be able to get control of the form elements on initial load of the frame. This is especially evidenced by the fact that my timeout waited 20 seconds and the form was still inaccessible.

I've decided that what I want to do is pretty much impossible, and my team has come up with an alternate solution that gets us halfway to where we want to be.

At this point, I believe the only acceptable solution is for a new "setSize" function within FormAPI, with which I can accomplish my original goal without having to write extra javascript.

Thanks for all the advice, Jonathon. I learned a few things.

JonathonG

I'm glad I could help. Let me try adding one more thing. I'm fairly certain (though not 100%) that the frame for the form is a *different* frame than the one where your script is executing. I believe that the script executes in its own frame...see the following description of the getScriptFrame method (http://<your_ts_server>/iw/help/tst/formapi/formapi_28.html#SEC28):

---snip----
Returns the frame containing the API and userscripts. It is designed to be used in the JavaScript returned by the callServer() method to access functions and variables in the userscript frame.
Caution should be used when using the returned object, as it is possible to completely delete the contents of this frame and the userscripts in it.

Arguments:
None.
Returns:
The JavaScript Frame object where the API and userscript reside.
---snip---

Like I said above, this isn't 100% conclusive, but it leads me to suspect that the scripts are in a different frame. Now, as for why the frame didn't finish loading even after your 25 second timeout, I'm not real sure. But, I suspect it has something to do with the way the browser is dealing with loading frames and running javascript in those frames. Keep in mind that it is a javascript call which actually loads the form frame (it starts out as blank.html). So, my theory is that the browser is somehow sequencing javascript processing time, and the setTimeout method is not really freeing up other frames to load. Thus, you have the 2-part if statement that goes through the setTimeout a couple of times. Not sure if I stated this before, but even with a very low value for the timeout (I think I tried it at 1 ms), from what I could tell, it still only called my function 2-3 times. So, it would seem that calls to setTimeout push the frame's javascript processing to the background. But, when they are next chosen for the foreground, the logic doesn't check to see if the time is up, it simply sets them running (and in this case, waiting for the timeout).

Ok, that was a lot of words, and maybe not very helpful. All that being said, have you tried a lower timeout (around 100ms) and the two-part condition on your if stmt? I would expect that you would have decent success with it that way.

Jonathon
Independent Interwoven Contractor