Prototype's Ajax.Updater not actually updating on IE7.

Question

I am trying to submit a form using Ajax.Updater and have the result of that update a div element in my page.

Everything works great in IE6, FF3, Chrome and Opera. However, In IE7 it sporadically works, but more often than not, it just doesn't seem to do anything.

Here's the javascript:

function testcaseHistoryUpdate(testcase, form) {
document.body.style.cursor = 'wait';
var param = Form.serialize(form);
new Ajax.Updater("content", "results/testcaseHistory/" + testcase, {
 onComplete: function(transport) {document.body.style.cursor = 'auto'}, 
 parameters: param,
 method: 'post'
 }
);
}

I've verified using alert() calls that param is set to what I expect.

I've read in many places that IE7 caches aggressively and that it might be the root cause, however every after adding the following to my php response, it still doesn't work.

header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

To further try to fix a caching issue I've tried adding a bogus parameter which just gets filled with a random value to have different parameters for every call, but that didn't help.

I've also found this, where UTF-8 seemed to be causing an issue with IE7, but my page is clearly marked:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Does anyone have any idea what could be wrong with IE7 as opposed to the other browsers I tested to cause this kind of issue?

Answer 1

A common problem seems to be the extra comma problem. Make sure IE is not giving you the bottom left alert icon. I had some trouble with this in the past, because IE was not validating my javascript it would not run as I wished.

Answer 2

It appears that you cannot do an update on a DOM id element that is inside a form tag in ie. Has anyone found a way around this? My code works fine when I move it outside the form tag, and also when I just comment out the form tag and don't move the DOM element.

Answer 3

I have exactly the same problem!

After a lot of trial-&-error approach, I found out what's going on:

IE executes the Ajax call, processes the PHP file, but does NOT display anything on screen!

Nothing "echo"ed, or "print"ed in the PHP file gets displayed on the div (target='hidden-div), nor the onComplete "alert" gets displayed on the screen!

BUT, all MySQL calls are working, I added some code to add and/or delete some foobar records on my database and they all worked!

Could this be IE caching issue?

Answer 4

Certainly smells like a caching issue to me. You are correct that IE7 (and IE6) cache very agressively, especially AJAX calls, and often incorrectly ignore cache control headers.

The usual fix is to append a "cachebuster" random parameter to the URL (not as an additional POST variable).

Answer 5

Not related to the AJAX issue, but in IE if you try to update an inline element with block level elements it will throw an error. To test if this applies to you wrap your code with the following:

try {
// Your code
// something.update('...');
} catch(error) {
alert(error.descripton)
alert(error.number)
}

If you get error -2146827687 rearrange your html so that you are updating block level elements with block level elements.

Answer 6

Kyle was correct! You cannot update to an element inside a form tag in IE.

Answer 7

IE is stupid when it comes to caching. I had a little 'helper' page which didn't have a whole html/body etc. So I couldn't put in my normal anti-caching stuff.

The idea of a URL var works though.

    var cacheBuster = parseInt(Math.random() * 99999999); // cache buster
    new Ajax.Updater(elementId, '/Helpers/PendingChanges.aspx?Cache=' + cacheBuster);

Also, I was getting an 'unspecified error' in IE8 until I added the line about charset.