Alert() statement lets code work, remove it, code errors out

I am posting this here, because of the 5 other JS forums, no one has answered this — I am hoping I might catch a break here… Thanks in advance!!

I am an intermediate-level JavaScript guy, so much of this is new to me. I appreciate your patience reading this.

I have a routine that creates some HTML on the fly (updateFilters() function) and after the HTML is created, I attempt to access some fields (elements) on the form itself.

I works fine if I place an alert() statement after the HTML is created, but when I remove, the code errors out.

I have tried the setTimeout() statement, but I cannot grab the element — undefined or null is returned.

Here is the code:

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

// Alert here makes the code work…

// alert(“Try this”);

// 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.text == savedFilterMethodValue) {

methodElement.options.selected = true;

break;

}

else {

methodElement.options.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.text == savedFitlerValues) {

choicesElement.options.selected = true;

break;

}

else {

choicesElement.options.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);

}

}

}

Do I have to pass the object (the form, the elements) to the completeEdit() function in the setTimeout() statement?

I could use some help…

Thanks!

Dan

Subject: alert() statement lets code work, remove it, code errors out

The “what to do” argument to setTimeout() is a string:

setTimeout(“completeEdit()”, 1000);

… and yes, if there are arguments to pass to the function, you need to include them. In this case, though, your function doesn’t take any arguments. Oh, and there’s no need to clear a timeout.

Subject: RE: alert() statement lets code work, remove it, code errors out

Once again, thanks for response!

I changed the setTimeout to:

setTimeout(“completeEdit()”, 2000)

but, when I attempt to get the methodElement, it says it is undefined – do I have to redefine all the variables again?

I am using the eval statement (I know, don’t use):

methodElement = eval(“myForm.FilterMethod_” + f);

because the senior-level developer instructs me to use this.

Should I use the getElementByID???

Here is the updated code:

function editQuery() {

var f;	

var x;

var methodElement;

var choicesElement;

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) {

		methodElement = element("FilterMethod_" + f);

		var methodIndex = methodElement.selectedIndex;

		var savedFilterMethodValue = methodElement.options[methodIndex].text;

		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()", 2000);

		function completeEdit(methodElement, choiceElement) {

			// Since the object was updated, get the object again...	

			methodElement = eval("myForm.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...	

			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	

			}

		} // completeEdit

	}

}

}

Thanks again!

Dan

Subject: RE: alert() statement lets code work, remove it, code errors out

Hi Dan,After your setTimeout calls completeEdit(), none of the variables from the previous scope will be available.

So when you use

methodElement = eval(“myForm.FilterMethod_” + f);

f is nothing, it doesn’t exist in the scope of the completeEdit function. none of the previously declared variables do.

Also, the syntax I would prefer here is:

methodElement = myForm[‘FilterMethod’ + f];

Within javascript, any dot property can be accessed using square brackets like that (very useful in some situations).

So these are the same (for example):

choicesElement.options.text

choicesElement.options[‘text’]