Internet Explorer not executing Javascript in order

Question

I'm developing a web app that needs to do some backend processing while still displaying the information on screen. Obviously this is best suited for AJAX, which I'm using. However, prior to beginning the AJAX request, I'm making a few visual changes via Javascript. Specifically:

document.getElementById('calc').innerHTML = 'Calculating...'; document.getElementById('calc').disabled = true;

I then go on to call a servlet via AJAX.

This works fine in Firefox. However in Internet Explorer (version 8), the visual changes never take effect. The app just sits there for a minute or two until the AJAX processing is done. It seems like the AJAX code is executing before the page changes, but I don't know why that would be.

Any assistance would be greatly appreciated.

EDIT: Here's my best effort at a Short, Self Contained, Correct, Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<script>
var inEdit = 0;
var calcCurrent = false; 
function recalc() {
var xmlhttp=new XMLHttpRequest();
if (xmlhttp==null)
{
  var tmp = "Your browser does not support XML! ";
  tmp += "Please contact your Technical Support division for information on how to upgrade.";
  alert(tmp);
}
else
{
  document.getElementById('calc').innerHTML = 'Calculating...';
  document.getElementById('calc').disabled = true;
  var url = "http://www.nzherald.co.nz/";
  xmlhttp.open("GET",url,false);
  xmlhttp.send(null);
  if (xmlhttp.responseText.indexOf("Success")>=0) {
    alert(xmlhttp.responseText);
  }
  else
    alert(xmlhttp.responseText);
  document.getElementById('calc').value = 'Recalculate';
  document.getElementById('calc').disabled = false;
}
}
</script>
</head>
<body>
<a id='calc' class='Button' href="javascript:recalc()" >Recalculate</a>
</body>
</html>

The only issue example with this is that this URL returns almost instantly. On my app it's pointing to a page that does database processing for about a minute, and so the problem is a lot more obvious.

What is your calc element? It may not support innerHTML in IE8 — Phil
– Phil, Commented Jan 18, 2012 at 0:30
be sure you don't have any console.log statements in the javascript, or IE may not run the code after them. It will, if you open developer tools while you run it. If this is the problem — Ryan
– Ryan, Commented Jan 18, 2012 at 0:31
Please provide a Short, Self Contained, Correct (Compilable), Example. — Jared Farrish
– Jared Farrish, Commented Jan 18, 2012 at 0:40
calc is an anchor <a> element, I'm fairly certain that supports innerHTML. Also, the innerHTML does change eventually, it just takes a long time. — enjiner
– enjiner, Commented Jan 18, 2012 at 2:22

selbie · Accepted Answer · 2012-01-18 05:04:46Z

1

You are passing "false" for the async parameter to xmlhttp.open() call. Because the stack has not unwound since you set the innerHTML property of the calc element, IE has not had a chance to repaint the screen.

You have a few options.

Restructure your code such that you make the ajax call async and get the result via a callback notification.
OR.... Set the innerHTML property on calc, then call setTimeout with a delay of 0 and a callback function that is written to call xmlhttp.open as you have it now. This will allow the stack to unwind and IE will repaint the DOM changes followed by your ajax call executing. Below is a hacked up version of your code to demonstrate what I am talking about.

Below is some hacked up code demonstrating #2.

var xmlhttp;

function recalc() {
    xmlhttp=new XMLHttpRequest();
    if (xmlhttp==null)
    {
      var tmp = "Your browser does not support XML! ";
      tmp += "Please contact your Technical Support division for information on how to upgrade.";
      alert(tmp);
    }
    else
    {
      document.getElementById('calc').innerHTML = 'Calculating...';
      document.getElementById('calc').disabled = true;
      setTimeout(recalc_start, 0);
    }
}

function recalc_start() {
  var url = "http://www.nzherald.co.nz/";

  xmlhttp.open("GET",url,false);
  xmlhttp.send(null);
  if (xmlhttp.responseText.indexOf("Success")>=0) {
    alert(xmlhttp.responseText);
  }
  else {
    alert(xmlhttp.responseText);
  }
  document.getElementById('calc').value = 'Recalculate';
  document.getElementById('calc').disabled = false;
}

edited Jan 18, 2012 at 5:04

answered Jan 18, 2012 at 4:50

selbie

105k15 gold badges109 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

selbie Over a year ago

If the above code snippit doesn't work, then try changing the timeout from "0" to "1" or something higher.

enjiner Over a year ago

Awesome! This option (using a timeout) completely solves my problem. Good to know why this is occurring. Thanks so much.

selbie Over a year ago

@enjiner - Glad it worked. ideally you go with option #1. Otherwise, a very long delay in the ajax request will likely keep your web page "frozen" (or at least other javascript code from running) until the ajax call completes.

Mike Samuel · Accepted Answer · 2012-01-18 04:40:19Z

1

Those two lines of code are very straightforward. The are two things that comes to mind:

Do you have the ID defined for another element. Can you double check that calc is not used anywhere else in the page? Preferably by doing a Ctrl+F in View Source.
Validate your HTML. Make sure you are not missing any closing tags or quotes in an attribute.

edited Jan 18, 2012 at 4:40

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

answered Jan 18, 2012 at 3:19

epignosisx

6,2122 gold badges33 silver badges31 bronze badges

1 Comment

enjiner Over a year ago

Thanks for the suggestions epignosisx. I checked both of those issues. Validating revealed a lot of non-compliant HTML including missing tags. Unfortunately the problem I described is still present, but it was good to identify the validation problems! Thanks again.

Phil · Accepted Answer · 2012-01-18 01:40:51Z

0

I am assuming this is an <input id='calc' type='text' /> element:

document.getElementById('calc').value = 'Calculating...';
document.getElementById('calc').setAttribute('disabled','disabled');

For best mutli-browser compatibility, try using jQuery:

$("#calc").val('Calculating...').attr('disabled','disabled');

edited Jan 18, 2012 at 1:40

Phil

166k25 gold badges265 silver badges269 bronze badges

answered Jan 18, 2012 at 1:01

ron tornambe

10.8k8 gold badges38 silver badges61 bronze badges

2 Comments

Phil Over a year ago

Can't think of a browser that would take issue with the first example. jQuery is not doing anything helpful here

RobG Over a year ago

@ron—for "best browser compatability" just set the property directly, there is no need for setAttribtue or jQuery (or its messy attr function).

Collectives™ on Stack Overflow

Internet Explorer not executing Javascript in order

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related