Looping synchronous Ajax xmlhttp requests not refreshing in IE

**Dormilich** · Jul 25 '10, 04:45 PM

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

**Chris G** · Jul 25 '10, 05:45 PM

Code:

<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** · Jul 25 '10, 07:10 PM

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

**Chris G** · Jul 25 '10, 07:25 PM

no change

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

Any other suggestions?

Thanks

Code:

	<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** · Jul 25 '10, 08:10 PM

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

**Chris G** · Jul 25 '10, 08:49 PM

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

Code:

			// 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** · Jul 27 '10, 03:29 PM

Still looking for some guidance on this one...

Anyone?

Thanks

**Dormilich** · Jul 27 '10, 04:28 PM

what kind of element is "barber_pol e"?

**Chris G** · Jul 27 '10, 05:25 PM

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

Code:

						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** · Jul 29 '10, 06:13 PM

Originally posted by Chris G

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

Code:

						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>';

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.p hp 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** · Jul 30 '10, 05:57 PM

ie cache

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** · Jul 30 '10, 07:56 PM

no luck

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

Code:

		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** · Jul 30 '10, 08:03 PM

Originally posted by Chris G

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

Code:

		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....

The request headers are not what we're worried about here, so those setRequestHeade r() 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:

Code:

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** · Jul 30 '10, 09:02 PM

response headers

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.getAllR esponseHeaders 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...

Attached Files

response_headers.jpg (67.8 KB, 299 views)

Looping synchronous Ajax xmlhttp requests not refreshing in IE

Looping synchronous Ajax xmlhttp requests not refreshing in IE

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment