setTimeout() completes and elements are then undefined

[arcanerain]

I have a setTimeout() statement in my code so the HTML that is being created dynamically can "catch-up" to the JavaScript...

The code works, but to get it to work I placed an alert() statement in the code so the code would stop ---- this worked fine.

I now have a:
setTimeout(completeEdit, 1000);

in my code, and once it completes, I attempt to get some elements from the form, however, they are "undefined."

Do I have to run through the same script again or do I have to get set all the variables again?

Here is the code snippet:
function editQuery() {
var f;
var x;
var myForm = document.forms[0];
// Get the row filters that were used in the last query...
for (f = 1; f < 16; f++) {
var filter = eval("myForm.FilterList_" + f);
if (filter.selectedIndex > 0) {
var methodElement = element("FilterMethod_" + f);
var methodIndex = methodElement.selectedIndex;
var savedFilterMethodValue = methodElement.options[methodIndex].text;
var choicesElement = element("FilterChoices_" + f);
var choicesIndex = choicesElement.selectedIndex;
if (isNaN(choicesIndex)) {
var savedFitlerValues = choicesElement.value;
}
else {
var savedFitlerValues = choicesElement.options[choicesIndex].text;
}
updateFilters(filter); // update the filters
// take the saved methods and values and then update the selections
// Wait for HTML...
setTimeout(completeEdit, 1000);
function completeEdit() {
// Since the object was updated, get the object again...
var methodElement = element("FilterMethod_" + f);
for (x = 0; x < methodElement.options.length; x++) {
if (methodElement.options[x].text == savedFilterMethodValue) {
methodElement.options[x].selected = true;
break;
}
else {
methodElement.options[x].selected = false;
}
}
// Since the object was updated, get the object again...
var choicesElement = element("FilterChoices_" + f);
for (x = 0; x < choicesElement.options.length; x++) {
if (choicesElement.options[x].text == savedFitlerValues) {
choicesElement.options[x].selected = true;
break;
}
else {
choicesElement.options[x].selected = false;
}
}
// Only display next row if f = 2...
// If only one row was used, no reason display the next row...
if (f == 2) {
displayNextFilter(f - 1); // display it
}
}
clearTimeout(timeOut);
}
}
}

Really stuck on this one..

Thanks!

 

[trollacious]

You could try something like this:

updateFilters(filter); // update the filters
 
//delay loop while element is undefined
while (element("FilterMethod_" + f) == undefined) {};

// Since the object was updated, get the object again...    
var methodElement = element("FilterMethod_" + f);

That would allow you to not have the embedded function, too.

Lee

 

[arcanerain]

In the:
while (element("FilterMethod_" + f) == undefined) {};

Do I need to put any iterations in the while loop?

Thanks!
Dan

 

[trollacious]

Looking over your code again, I see that the function element returns an array, so you might try

do
  {
  var methodElement = element("FilterMethod_" + f);
  }
while (methodElement[methodElement.length - 1] == undefined);

I don't think that would work the way you want, either. If you created a hidden input at the end of updateFilters(filter); , you could check to see if that was defined or not, and then proceed. That would probably be better overall.

Lee

 

[arcanerain]

The updateFilters checks to see if the field has any value in it. There are no hidden inputs...

The updateFilters calls another function where the field values (selection values) are updated --- this is where the HTML is being built and needs to catch up to the JavaScript, is my understanding...

So, after the updateFilters finishes, the element exists, however, when I use the setTimeout, it seems to lose its focus on the element...

I will try the do while loop and see what happens...

Thanks!

 

[arcanerain]

The do while loop still won't let me get an handle on the element...

Just placing one alert before the for loop, fixes this...

Totally lost...

Thanks!