JavaScript Forum

**catatung** · 06-14-2010, 08:18 PM

I'm setting a cookie from inside a function with a command such as this :

PHP Code:


			
document.cookie = "userName=brown"

However, as testing after running the function I display the information with this command:

PHP Code:


			
alert (document.cookie);

It comes up blank, no data. However if I write 2 alert lines in a row the 2nd time it has the data to display. A little more neat (and proof of the time concept), if I use this line instead:

PHP Code:


			
setTimeout("alert(document.cookie)",1250);

It works every time. Is this normal behavior and/or is there a best way to work around this besides just a statement to cause a small delay? I've also tried writing information to a hidden DIV (.innerHTML) and reading it back out once the function returns and I get the same behavior.

Has anyone else run into this or knows why this is?

**catatung** · 02:30 AM

I wanted to delete this thread and start over but it looks as if I can't. I've noticed that this "bug" only happens when XMLHttpRequest is used, not just when a cookie is set from a function. It also happens with div data. So to make it simpler, here is a new clear and concise example of what I am doing:

Code:

PHP Code:


			

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grrrrrrrrrrr....</title>

<style>
    #dataDiv {
        height: 100px;
        width:    100px;
        background-color: red;    
    }
</style>

</head>
<body>

<div id="dataDiv">blah</div>

<script type="text/javascript">
    alert ("Please make note of the DIV box contents - it shows blah.  Click OK to run getUserInfo routine.");
    getUserInfo ("www.google.com");
    alert ("getUserInfo routine has run and returned. This is the first alert line and shows the old data even though the routine that updated it has already run and returned.\n\ndataDiv innerHTML contents: " + document.getElementById("dataDiv").innerHTML);
    alert ("This is the very next line of code, the second alert line - and it will now show new contents.\n\ndataDiv innerHTML contents: " + document.getElementById("dataDiv").innerHTML);
    alert ("why???");

// The following code are functions code.
// JavaScript Document

function getUserInfo(url) {

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) { }
        }
    }
    
    if (xhr) {
        xhr.onreadystatechange = checkGetResult;
        xhr.open("GET", url, true);
        xhr.send(null);
    }
    else {
        alert ("couldnt make XMLHttp Request.");
    }
}

function checkGetResult() {
    if (xhr.readyState == 4 ) {
        if (xhr.status == 200 ) {
            var outMsg = xhr.responseText;
        }
        else {
            var outMsg = "There was a problem.  Error Code = " + xhr.status;
        }
        
    // What would actually go here is information from the XMLHttpRequest (outMsg)
    // but for the sake of simplicity in exhibiting the problem I am having, I am simply
    // changing the word in the DIV.


    document.getElementById("dataDiv").innerHTML="newblah";
    }
}

</script>

</body>
</html>

Run this and you will see what I mean. After the function is called which updates the DIV contents I run an alert line to display the contents of the DIV. It shows the initial contents. However the very next line displays the same exact data and it comes up with the updated info.

If I rewrite the function to only update the DIV then the update is immediate and both alert lines show the new info, so I am assuming the problem has to do with the existence of the XMLHttpRequest lines being present. Why is this?? And is there any way to work around it?

**logic ali** · 06-15-2010, 09:39 AM

Quote:

Originally Posted by catatung

getUserInfo ("www.google.com");
alert ("getUserInfo routine has run and returned. This is the first alert line and shows the old data even though the routine that updated it has already run and returned.\n\ndataDiv innerHTML contents: " + document.getElementById("dataDiv").innerHTML);

No it hasn't.
The routine that updates the HTML is an onreadystatechange handler, which runs whenever the asynchronous request completes, which could be at any time. If you want your code to wait around for the result to be written, use a synchronous request:

Code:

xhr.open("GET", url, false);

**catatung** · 06-15-2010, 01:39 PM

Hi,

I did see that in the docs on how to use XMLHttpRequest but changing it to false didn't make a difference... I will try it again. One thing I didn't do though was a CTRL-F5 afterwards so it could have been a cache issue... I'll let you know

**catatung** · 06-16-2010, 02:51 AM

Strange thing, I just tried it with the false setting as you suggested and now I get the old data both times... very odd.. Do you have any other suggestions?

The bottom line in what I am trying to do is write a Javascript routine that will execute a php file with parameters passed (such as ?getUserID=10) which then will report back information regarding user #10 in the database and then load it into a Javascript array.

This is driving me nuts though as the documentation clearly says that true or false specifies asynchronous vs synchronous but doesn't seem to be acting as such.. Has anyone else ever run into this or know of a way to work around it?

**catatung** · 06-16-2010, 03:12 AM

I put in this code after running the function:

PHP Code:


			
for (i=1; i<1111110; i++) {
if (document.getElementById("dataDiv").innerHTML == "newblah") { alert ("ut") };
}

This causes almost a 10 second delay while it keeps checking but I get no alert box of "ut" showing the updated DIV has been read. However if I write 2 alert boxes in a row I can get the updated information in the 2nd alert box in less than a second. Something is wrong.

What's even weirder is if I remove all of the alert boxes after the getUserInfo function, I can SEE the DIV is updated on the screen, and I get the 10 second delay while it's looping to check if it = "newblah". The DIV on-screen SHOWS newblah yet it never executes the alert box showing "ut". AND what's even weirder is once the looping finishes, I have a line reading "alert (document.getElementById("dataDiv").innerHTML);" and when that runs it shows the OLD value of "blah" ----- even with the DIV on-screen SHOWING the new value already, for almost 10 seconds!

Strange? bug?? Anyone know what this is? It's driving me mad

**catatung** · 06-16-2010, 03:16 AM

Here is the code I'm running that the above post references, if one of your Javascript guru's want to drop it in and test it... I would love to know why this is acting this way.

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grrrrrrrrrrr....</title>

<style>
    #dataDiv {
        height: 100px;
        width:    100px;
        background-color: red;    
    }
</style>

</head>
<body>

<div id="dataDiv">blah</div>

<script type="text/javascript">
//    alert ("Please make note of the DIV box contents - it shows blah.  Click OK to run getUserInfo routine.");
    getUserInfo ("www.google.com");
    //    brown();
//alert ("getUserInfo routine has run and returned. This is the first alert line and shows the old data even though the routine that updated it has already run and returned.\n\ndataDiv innerHTML contents: " + document.getElementById("dataDiv").innerHTML);
//    alert ("This is the very next line of code, the second alert line - and it will now show new contents.\n\ndataDiv innerHTML contents: " + document.getElementById("dataDiv").innerHTML);
//    alert ("why???");

for (i=1; i<111110; i++) {
if (document.getElementById("dataDiv").innerHTML == "newblah") { alert ("ut") };
}
//if (document.getElementById("dataDiv").innerHTML = "blah") {alert (document.getElementById("dataDiv").innerHTML)};    
//if (document.getElementById("dataDiv").innerHTML != "blah") {alert (document.getElementById("dataDiv").innerHTML)};    
//if (document.getElementById("dataDiv").innerHTML != "blah") {alert (document.getElementById("dataDiv").innerHTML)};    
//if (document.getElementById("dataDiv").innerHTML != "blah") {alert (document.getElementById("dataDiv").innerHTML)};    
//if (document.getElementById("dataDiv").innerHTML != "blah") {alert (document.getElementById("dataDiv").innerHTML)};    

alert (document.getElementById("dataDiv").innerHTML);




// The following code are functions code.
// JavaScript Document

function getUserInfo(url) {

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) { }
        }
    }
    
    if (xhr) {
        xhr.onreadystatechange = checkGetResult;
        xhr.open("GET", url, true);
        xhr.send(null);
    }
    else {
        alert ("couldnt make XMLHttp Request.");
    }
}

function checkGetResult() {
    if (xhr.readyState == 4 ) {
        if (xhr.status == 200 ) {
            var outMsg = xhr.responseText;
        }
        else {
            var outMsg = "There was a problem.  Error Code = " + xhr.status;
        }
        
    // What would actually go here is information from the XMLHttpRequest (outMsg)
    // but for the sake of simplicity I am setting a simple cookie until I can see
    // the theory of operation work where it can be read back at the main code.


    document.getElementById("dataDiv").innerHTML="newblah";

    }
}

function brown() {
    document.getElementById("dataDiv").innerHTML="newblah";    
}

</script>

</body>
</html>

**catatung** · 06-16-2010, 05:15 PM

I figured out what was causing the problem;

I changed the argument TRUE to FALSE (in the XMLHttpRequest routine) so as to create a synchronous call (whereas it should wait for a response to be received from the server before continuing), but I left in the onreadystatechange event handler in, which was screwing it up. After changing TRUE to FALSE *and* removing the onreadystatechange event handler, the script works as expected and receives the new data in all cases of checking.