My function works only if alert function exists inside it

This site is best viewed in a modern browser with JavaScript enabled.

My function works only if alert function exists inside it

jjanes0918

I have what I think is a strange issue but others may see something I am missing.

I am using AJAX functionality to process a php script on a server and then place the output of the script into a div element. Simple right ?!?!

Here is the code snippet


function doWork13(typeCode,colorBlockName,objectCategory,imgID){
	httpObject = getHTTPObject();
	if (httpObject != null) {
		httpObject.open("GET", "loadpic1.php?typeCode=" + typeCode + "&colorBlockName=" + colorBlockName + "&objectCategory=" + objectCategory, true);
		httpObject.send(null);
		httpObject.onreadystatechange = setOutput13(imgID);
	}
}

function setOutput13(imgID){
	alert("imgID =" +imgID);
	var img = imgID
	if(httpObject.readyState == 4){
		document.getElementById(img).innerHTML = httpObject.responseText;
	}
}

This code shown here works perfectly BUT....
I do not want the alert message to be there. When I remove that line of code the script fails to function. There is no error just nothing happens.

The function is to replace one image with another and the variable in question is simply the ID tag of the particular image being modified.

As I said it works with the alert but does not with out, could it be a timing issue in that the alert gives enough time for the if statement in the setOutput13 function become TRUE

just not sure

Thanks
Jeff

jjanes0918

this line does have a semi colon at the end as shown below

var img = imgID;

Tcobb

Take this with a grain of salt, as I have not pasted and tried to replicate your code, but I suspect that the problem is that the 'alert' gives the time for the AJAX request to complete. You might try adding after :

function setOutput13(imgID){

a line like this:

if (httpObject.readyState != 4){return;}

and omitting the alert--and really, you should be checking the status of the httpObject as well.

jjanes0918

I tried adding your code without success I still need the alert box. I agree I think it is also a timing issue but I can't figure a way around it.

jjanes0918

I have additional information, I do not think it is a timing issue I think it is like a status issue I guess

Here is my code as of right now

function doWork13(typeCode,colorBlockName,objectCategory,imgID){
	httpObject = getHTTPObject();
	if (httpObject != null) {
		httpObject.open("GET", "loadpic1.php?typeCode=" + typeCode + "&colorBlockName=" + colorBlockName + "&objectCategory=" + objectCategory, true);
		httpObject.send(null);
		pausecomp(1000);
		httpObject.onreadystatechange = setOutput13(imgID);
	}
}

function setOutput13(imgID){
	alert(httpObject.readyState);
	if(httpObject.readyState == 4){
		document.getElementById(imgID).innerHTML = httpObject.responseText;
	}
}


function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}

I added a simple delay to the first function which is basically delaying the javascript from processing the the last command in the AJAX function which process the the output based on the status of --httpObject.readyState--

as the code is shown above the alert generates a value of 1, then then next statement is processed which by now it is a 4 and the generated out is inserted correctly and the function works as I suspect it does. The delay I inserted shows up as a delay before the alert window which is what I expect.

IF I take out the alert statement the function fails to complete as the value of --httpObject.readyState-- is 1. In the following block of code I checked the value of --httpObject.readyState-- in the output function and it loops with a value of 1

I placed the check after the initial check of the value which fails (it is looking for a 4 but is at that point a 1)

The key seems to be a the alert statement and how that is processed in that the processing of the alert statement is allowing the --httpObject.readyState-- to change to a 4 and let the function process successfully

function setOutput13(imgID){
	var data='';
	var a=0;
	alert(httpObject.readyState);
	if(httpObject.readyState == 4){
		document.getElementById(imgID).innerHTML = httpObject.responseText;
	}
	while(httpObject.readyState != 4 && a<200) {
		data += " " + httpObject.readyState;
		a++;
	}
	alert("a=" + a + "data=" + data);
}

I do not think I understand how or when --httpObject.readyState-- gets altered but somehow the alert is allowing it to work.

I also use identical functions many times prior in my code with one small exception they all work perfectly the difference is in the last line of the first function called

httpObject.onreadystatechange = setOutput13(imgID);

in the code below from a working function I am not passing anything to the output processing function.

httpObject.onreadystatechange = setOutput11;

I will try to create a global variable and maybe set it in the first function and then read the global in the second that way I do not have to pass the variable and it may work I will let you know what I find but this is an interesting issue.

jjanes0918

OK the global var allows it to work but I am still curious as to what this issue may be so appreciate any responses.

Thanks

clueful

httpObject.onreadystatechange = setOutput13(imgID);

That is a function call when it should be a function address.

httpObject.onreadystatechange = function(){ setOutput13(imgID); }

This isn't tested but it may be an improvement:


function doWork13(typeCode,colorBlockName,objectCategory,imgID){
	var httpObject = getHTTPObject();
	if (httpObject != null) {
		httpObject.open("GET", "loadpic1.php?typeCode=" + typeCode + "&colorBlockName=" + colorBlockName + "&objectCategory=" + objectCategory, true);
		httpObject.send(null);
		httpObject.onreadystatechange = [B]function(){ setOutput13( this, imgID ); };[/B]
	}
}

function setOutput13( req, imgID )
{	
  if( req.readyState == 4)
    document.getElementById( imgId ).innerHTML = req.responseText;
}