www.webdeveloper.com
Results 1 to 7 of 7

Thread: My function works only if alert function exists inside it

  1. #1
    Join Date
    Oct 2009
    Posts
    10

    My function works only if alert function exists inside it

    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

    Code:
    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

  2. #2
    Join Date
    Oct 2009
    Posts
    10
    this line does have a semi colon at the end as shown below

    var img = imgID;

  3. #3
    Join Date
    Mar 2009
    Posts
    467
    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 :
    Code:
    function setOutput13(imgID){
    a line like this:
    Code:
    if (httpObject.readyState != 4){return;}
    and omitting the alert--and really, you should be checking the status of the httpObject as well.
    Last edited by Tcobb; 01-17-2011 at 04:20 PM.

  4. #4
    Join Date
    Oct 2009
    Posts
    10
    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.

  5. #5
    Join Date
    Oct 2009
    Posts
    10
    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
    Code:
    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



    Code:
    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

    Code:
    httpObject.onreadystatechange = setOutput13(imgID);

    in the code below from a working function I am not passing anything to the output processing function.
    Code:
    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.

  6. #6
    Join Date
    Oct 2009
    Posts
    10
    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

  7. #7
    Join Date
    Dec 2010
    Posts
    207
    Code:
    httpObject.onreadystatechange = setOutput13(imgID);
    That is a function call when it should be a function address.

    Code:
    httpObject.onreadystatechange = function(){ setOutput13(imgID); }
    This isn't tested but it may be an improvement:
    Code:
    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 = function(){ setOutput13( this, imgID ); };
    	}
    }
    
    function setOutput13( req, imgID )
    {	
      if( req.readyState == 4)
        document.getElementById( imgId ).innerHTML = req.responseText;
    }


    Q: I found this code...
    A: Then find its author.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles