js weirdness and timing or delays?

[brentnicholas]

OK, so this isn't really something to tell me how to fix, but something for people to throw ideas out there on what they've seen in the past if they've encountered somthing like this.

So I've got a js function that calls several other functions, they set values on the form elements, call an Ajax.Request (prototype), re-populate a js array and finally submit a form to another frame.

The weirdness is this.... when getting it all to work right I used several alerts() to look at data along the way. Once I got it working right, I removed all those alerts(). Then it broke again.

So I put the alerts() all back in, and removed them one by one. I've got it down to two alerts that show the valus of some hidden form fields. It still runs correctly. If I remove them it doesn't.

The incorrect behavior is that the js array keeps old values without the alerts, but has the newly requested (Ajax) array values if I leave the alerts in.

So... Is this a timing issue? Maybe the alert() gives the browser or ajax call enough time to finish, but is too fast without them?? I'm using the 'onComplete' call back in the Ajax.Request, so that should take care of the 'lag' if any on getting the data to place in the array. The callback calls a function to re-populate the js array.

So anyone tangled with something like this in the past?

Thanks,

BN

[Kenny]

Yes. I use a setTimeout to give the machine a chance to keep pace ex;
setTimeout("nextFunction()",100)

[jscheuer1]

That may or may not be sufficient for a live application. Especially when an AJAX request is involved, it will take the server and the connection as much time as is required to both retrieve and send the new data, whether it be markup, values, or whatever. If your timeout is for less time than it takes, the old values, or no values will be available when your function runs.

With AJAX request, the onreadystatechange event may be used to determine when to act. A readyState of 4 means completion of the request. The request status reveals the success or failure of the request.

[Twey]

Also, don't pass strings to setTimeout(). See http://blogs.msdn.com/ericlippert/ar.../01/53329.aspx.

[brentnicholas]

John, thanks for the reply. Yeah, a timer isn't a good solution for this. I was under the impression that subsequent javascript code would run after the readystate return of 4, or in Prototypes case the onComplete callback fires.

I'm thinking I need to rearrange my code to get it to wait. But that relies on the assumption that js waits for other js to complete before other js down the line is run.

Otherwise maybe I should not be running the Ajax.Request in asynchronous mode. however, I thought that just effected requests... not how js runs.

Here's my code, not to solve the problem, but just to illustrate the concepts.
See the: //THE QEUESTION IS... part

function setKeySubMeasure(KeyMeasure,KeySubMeasure)
{
	document.CONTROL_FORM.KEY_SUB_MEASURE.value = KeySubMeasure;
	parent.SELECT_FRAME.document.SELECT_FORM.KEY_SUB_MEASURE.value = KeySubMeasure;
	setKeyMeasure(KeyMeasure,KeySubMeasure);
			
	var detailMode = document.CONTROL_FORM.DETAIL_MODE.value;
	
	// THE QUESTION IS.... does the JS continue on to the SWITCH 
             //while the function 'refreshListArray()' runs...

	refreshListArray();
			
	switch(detailMode)
	{
	case 'ADD':
		onclickAdd();
		break;
					
	case 'EDIT':
		onclickEdit();
		break;
					
	case 'VIEW':
		displayDetail();
		break;
					
	case 'LIST':
		displayList();
		break;
	}
						
	document.CONTROL_FORM.target = 'CONTROL_FRAME';
	document.CONTROL_FORM.FUSEACTION.value='control';
	document.CONTROL_FORM.submit();
}

function refreshListArray()
{
	var keyMeasure = document.CONTROL_FORM.KEY_MEASURE.value;
	var keySubMeasure = document.CONTROL_FORM.KEY_SUB_MEASURE.value;
		
	new Ajax.Request('qryListArray.cfm?KEY_MEASURE='+keyMeasure+'&KEY_SUB_MEASURE='+keySubMeasure,
	 {
	method: 'get',
	onComplete: setArraySeqID,
	onFailure: function(r) {
	 throw new Error( r.statusText );
	    }
	 }
	);	
}

function setArraySeqID(transport)
{
	var transportResponse = transport.responseText;
	arraySeqID = transportResponse.evalJSON();
}

[jscheuer1]

Well, I think it wouldn't wait, but you could easily test that theory. However, you already have a more likely place to put the code:

function setArraySeqID(transport)
{
	var transportResponse = transport.responseText;
	arraySeqID = transportResponse.evalJSON();
}

Anything included in the above function would wait until the request is completed. But this still may not be enough. If you want your switch (or any other code) to act upon the updated document, it would be best to have it after the document is updated.

It is unclear to me from your code when that happens, it looks like it might be with the line:

arraySeqID = transportResponse.evalJSON();

If so, it would be after that. If there is still more (not shown) processing to be done before the document is actually updated, it should go after whatever that processing is.

[brentnicholas]

John -

Yeah I agree it doesn't wait.... it just keeps on chuggin..

I was having one of those brain dead weeks last week and couldn't see the solution staring back at me... 8)

I ended up moving the switch block and form submit out into a function.

Then called the JSONEval array population 'onSuccess' of the Ajax.Request
I then called the switch/submit function at the 'onComplete' of the Ajax.Request

That took care of it just fine.

Thanks for everyone's thoughts and input.

BN