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

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.