Looping synchronous Ajax xmlhttp requests not refreshing in IE

[Chris G]

Hi,

I have a loop in which I'm making Ajax xmlhttp requests. This occurs within a function triggered by a window.onload event.

The Ajax calls are being made with async=false, because they need to occur in a specific order that relies on each step completing before the next can occur.

With each successive request in the loop, I'm updating a div with the xmlhttp.responseText.

Firefox is refreshing between calls as desired.

IE is not. When the loop begins, the div is populated with the pre-loop content. When the loop finishes, the div is populated with the first refresh that occurs outside of the loop.

Can someone please help?

Two attempted solutions:
1. Adding a random string to the end of the GET query string to ensure a unique url
2. Submitting with the POST method

No luck with either.

Thanks.

[Dormilich]

I would need to see the code to make more than a guess.

[Chris G]

<script type="text/javascript">
    function order_process() {
        var err;
        var queue_id = "<?= implode(':',$plans[$_REQUEST['order_queue_id']]); ?>".split(':');                // Queue ID
        var queue_ax = "<?= implode(':',array_keys($plans[$_REQUEST['order_queue_id']])); ?>".split(':');    // Queue Action
        i = 0;
        for (step in queue_id) {
 
            // The DIV contents that display during each loop iteration
            document.getElementById("barber_pole").innerHTML='\
                <center>\
                <table style="align:left" border="0" cellpacing="1" cellpadding="1">\
                    <tr><td><B>Processing Order</B><span style="float:right;">Step ' + (i + 1) + '/' + queue_id.length + '</span></td></tr>\
                    <tr><td style="background-color:#FFFFFF;height:1.5px"></td></tr>\
                    <tr><td height="20" style="text-align:center">' + queue_ax[i] + '...</td></tr>\
                    <tr><td height="20"><IMG SRC="http://bytes.com/topic/_include/images/barber_pole.gif" style="vertical-align: middle;"></td></tr>\
                </table>\
                </center>';
 
            xmlhttp = ajax_request(); // Create request object
            xmlhttp.onreadystatechange=function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    1;
                }
            }
 
            var url = '../../../api/order_process.php?api_login=' + "<?=$api_login?>" + '&api_pass=' + "<?=$api_pass?>" + "&order_id=<?= $_REQUEST['order_id']?>" + '&order_action_id=' + queue_id[step] + '&timeid=' + Math.random();
            xmlhttp.open("GET",url,false);
            xmlhttp.send();
 
            // If the response includes the string 'failed' exit the loop and render error error message
            if (xmlhttp.responseText.split(',')[0] == 'failed') {
                err = queue_ax[i] == 'Registering Domain'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[domain_register][title]?>"      + "</h1><DIV class='landing-body'><?=$feedback[domain_register][body]?></DIV>"
                    : queue_ax[i] == 'Provisioning cPanel Account'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[cpanel_provision][title]?>"     + "</h1><DIV class='landing-body'><?=$feedback[cpanel_provision][body]?></DIV>"
                    : queue_ax[i] == 'Credit Card Fraud Protection'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[maxmind_minfraud][title]?>"     + "</h1><DIV class='landing-body'><?=$feedback[maxmind_minfraud][body]?>\"" + xmlhttp.responseText + '"</DIV>'
                    : queue_ax[i] == 'Verifying Payment'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[verify_payment][title]?>"       + "</h1><DIV class='landing-body'><?=$feedback[verify_payment][body]?>\""   + xmlhttp.responseText + '"</DIV>'
                    : xmlhttp.responseText == 'failed,'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[gen_err][title]?>"              + "</h1><DIV class='landing-body'><?=$feedback[gen_err][body]?></DIV>"
                    : "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[gen_err][title]?>"              + "</h1><DIV class='landing-body'><?=$feedback[gen_err][body]?>\""          + xmlhttp.responseText + '"</DIV>';
                break;
            }
            i++;
        }
 
        if (err) {
            document.getElementById("landing-pres").innerHTML = err;
            Cufon.replace('.landing-title');
        } else {
            document.getElementById("barber_pole").innerHTML = "<?= $thank[$_REQUEST['order_queue_id']][1] ?>";
        }
    }
    window.onload=order_process;
    </script>
 

[Dormilich]

well, a for … in loop is not the suited structure to loop over an array, better use a standard for() loop.

[Chris G]

I made the change as you suggested and it made no difference...

Any other suggestions?

Thanks

    <script type="text/javascript">
    function order_process() {
        var err;
        var queue_id = "<?= implode(':',$plans[$_REQUEST['order_queue_id']]); ?>".split(':');                // Queue ID
        var queue_ax = "<?= implode(':',array_keys($plans[$_REQUEST['order_queue_id']])); ?>".split(':');    // Queue Action
        for (i = 0; i < queue_id.length; i++) {
            // The DIV contents that display during each loop iteration
            document.getElementById("barber_pole").innerHTML='\
                <center>\
                <table style="align:left" border="0" cellpacing="1" cellpadding="1">\
                    <tr><td><B>Processing Order</B><span style="float:right;">Step ' + (i + 1) + '/' + queue_id.length + '</span></td></tr>\
                    <tr><td style="background-color:#FFFFFF;height:1.5px"></td></tr>\
                    <tr><td height="20" style="text-align:center">' + queue_ax[i] + '...</td></tr>\
                    <tr><td height="20"><IMG SRC="http://bytes.com/topic/_include/images/barber_pole.gif" style="vertical-align: middle;"></td></tr>\
                </table>\
                </center>';
 
            xmlhttp = ajax_request(); // Create request object
            xmlhttp.onreadystatechange=function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    1;
                }
            }
 
            var url = '../../../api/order_process.php?api_login=' + "<?=$api_login?>" + '&api_pass=' + "<?=$api_pass?>" + "&order_id=<?= $_REQUEST['order_id']?>" + '&order_action_id=' + queue_id[i] + '&timeid=' + Math.random();
            xmlhttp.open("GET",url,false);
            xmlhttp.send();
 
            // If the response includes the string 'failed' exit the loop and render error error message
            if (xmlhttp.responseText.split(',')[0] == 'failed') {
                err = queue_ax[i] == 'Registering Domain'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[domain_register][title]?>"      + "</h1><DIV class='landing-body'><?=$feedback[domain_register][body]?></DIV>"
                    : queue_ax[i] == 'Provisioning cPanel Account'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[cpanel_provision][title]?>"     + "</h1><DIV class='landing-body'><?=$feedback[cpanel_provision][body]?></DIV>"
                    : queue_ax[i] == 'Credit Card Fraud Protection'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[maxmind_minfraud][title]?>"     + "</h1><DIV class='landing-body'><?=$feedback[maxmind_minfraud][body]?>\"" + xmlhttp.responseText + '"</DIV>'
                    : queue_ax[i] == 'Verifying Payment'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[verify_payment][title]?>"       + "</h1><DIV class='landing-body'><?=$feedback[verify_payment][body]?>\""   + xmlhttp.responseText + '"</DIV>'
                    : xmlhttp.responseText == 'failed,'
                    ? "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[gen_err][title]?>"              + "</h1><DIV class='landing-body'><?=$feedback[gen_err][body]?></DIV>"
                    : "<h1 class=\"landing-title\">"  + fname + ', ' + "<?=$feedback[gen_err][title]?>"              + "</h1><DIV class='landing-body'><?=$feedback[gen_err][body]?>\""          + xmlhttp.responseText + '"</DIV>';
                break;
            }
        }
 
        if (err) {
            document.getElementById("landing-pres").innerHTML = err;
            Cufon.replace('.landing-title');
        } else {
            document.getElementById("barber_pole").innerHTML = "<?= $thank[$_REQUEST['order_queue_id']][1] ?>";
        }
    }
    window.onload=order_process;
    </script>
 

[Dormilich]

what happens, if you replace the original multi-line assignment with a simple test string? (testing whether IE likes the backslash EOL)

[Chris G]

Thanks, Dormilich, i did try that earlier ...

            // The DIV contents that display during each loop iteration
            document.getElementById("barber_pole").innerHTML='test' + i;
 

... but it had no affect.

Still digging for an answer...

IE does not update anything until after the window.onload function finishes. The interesting thing is, if i stick an alert box in each iteration of the loop, the screen does refresh the div.

[Chris G]

Still looking for some guidance on this one...

Anyone?

Thanks

[Dormilich]

what kind of element is "barber_pole"?

[Chris G]

It's a <div> located near the bottom of the document.

                        echo '<h1 class="landing-title">',$order->info[first],', thank you for your order!</h1>';
                        echo '
                            <DIV STYLE="overflow-y: auto; height:245px; border:0 #000000 solid; text-align: left;  padding: 2px">',
                            $thank[$order->order_queue_id][0],
                            '<div height="100%" id="barber_pole" style="margin-bottom:15px">
                            <center>
                            <table border="0" cellpacing="1" cellpadding="1">
                                <tr><td style="text-align:left"><B>Processing Order</B><span style="float:right;">Step 1/'.count($plans[$order->order_queue_id]).'</span></td></tr>
                                <tr><td style="background-color:#FFFFFF;height:1.5px"></td></tr>
                                <tr><td height="20" style="text-align:center">'.$cat_queue[0].'...</td></tr>
                                <tr><td height="20"><IMG SRC="http://bytes.com/topic/_include/images/barber_pole.gif" style="vertical-align: middle;"></td></tr>
                            </table>
                            </center>
                            </div>',
                            '</DIV>';
 

[tetrahedral]

@Chris G
In my experience, IE is much more finicky about its caching than Firefox, and sometimes something that works fine in Firefox can have unexpected results in IE, even erratic. Check your order_process.php and make sure it is setting the headers correctly (Cache-control: no-cache, no-store; Pragma: no-cache; Expires: some-date-in-past)

[Chris G]

tetrahedral,

Thanks for your reply. I believe I already tried that with no luck, but I'll attempt again to be sure.

I am appending a random value to the end of the query string, isn't this essentially the same as setting the cache properties in the headers?

Still struggling with it...

Thanks

[Chris G]

i added the following to my request with no change in results...

        var url = '../../../api/order_process.php?api_login=' + "<?=$api_login?>" + '&api_pass=' + "<?=$api_pass?>" + "&order_id=<?= $_REQUEST['order_id']?>" + '&order_action_id=' + queue_id[i] + '&timeid=' + Math.random();
        xmlhttp.open("GET",url,false);
        xmlhttp.setRequestHeader("Cache-Control", "no-cache, must-revalidate");
        xmlhttp.setRequestHeader("Pragma", "no-cache");
        xmlhttp.setRequestHeader("Expires", "Sat, 1 Jan 2005 00:00:00 GMT");
        xmlhttp.send();
 

All suggestions appreciated. This is driving me nuts....

[tetrahedral]

@Chris G
The request headers are not what we're worried about here, so those setRequestHeader() calls aren't very helpful.

What you need to set (assuming that caching is causing the problem) are your reply headers, which can be done from the server that the requests are being sent to. So, in that php file that you are requesting in your xmlhttprequest object, at the very top of the data that is sent back to the browser, you need:

Header("Cache-control: no-cache, no-store, must-revalidate");
Header("Pragma: no-cache");
Header("Expires: -1");

Again, this is all assuming that caching is what is causing your issues here (although it is a good idea to always do this for dynamic content).

[Chris G]

tetrahedral,

thanks again for your attention to this. Much appreciated. The php file being requested is actually a call to a third party api function. I did use the xmlhttp.getAllResponseHeaders function to display the response headers and found that all the parameters you suggested were being set somehow by both IE8 and FF- not sure where, perhaps by default? See the attached image for the list of response headers.

Any other suggestions?

Again, thanks so much for your help so far...

[tetrahedral]

Well then it appears cacheing can be ruled out as a probable cause.

I noticed you're using window.onload. Are you sure that the div 'barber_pole' has been loaded when it tries to access it? If not, then it will just load in with the pre-loop content (as you said is happening). You might look into jQuery's .ready() function, which waits until all of the elements are ready before calling a function.

P.S. Switching to jQuery in my development for this stuff saved me a load of headaches in terms of cross-browser problems.

[Chris G]

tetrahedral,

I've tried experimenting with the .ready function but I'm not certain as to where it would be used...

Is it wrapped around where the ajax object is created and where the send occurs?

Thanks...

[tetrahedral]

@Chris G
It's much less complicated than you think!

In place of:

window.onload=order_process;

Use:

$(document).ready(order_process);
//Which is also the same as
$(order_process);

[Chris G]

Thanks again, Tetrahedral.

I replaced the onload with the following...

$(document).ready(order_process);
 

And the results were the same as with the onload.

Eek...

Still pulling my hair out...

[tetrahedral]

Do you have a javascript debugger installed?

[johnb773]

I am also having the same problem. If I clear Temp Internet files, and reload, it will display the correct file. Every refresh/loop after that, only shows the initially loaded file. Even if I close the browser and reopen it, it still shows the 'cached' version.

I've added an "alert(xmlhttp.responseText);" and that too only shows the 'cached' version. It seems that IE looks for a cached version first, which is strange since in the .js file it starts a "NEW" request and I'm just having it "GET" a .txt file. Which would make me think that even if you add "no-cache" to your HTML/PHP file, the "no-cache" does not pertain to the XML get command. So, is there a way to do a FORCE get command?

I've been working on this for about 4 days now, and still no progress. Has anyone found a solution for this yet?

--John

[gits]

try to add a unique querystring to the url before sending the request, like:

xmlhttprequest.open("GET", url + "?" + (+ new Date), false);

[johnb773]

gits-

Thank you. I figured that out this morning (1:30am), then went to bed -- bald!