Intermittent failure of jQuery ajax using IE8
I am using jQuery ajax to load data into a jQuery tab. It works fine in Chrome and FireFox. In IE8 the data is sometimes not loaded. If I clear cache or reload the page it apparently works fine.
As far as I can tell it fails after shutting down IE and then starting it up again some time later. It has failed within hours, but succeeds if the delay is only minutes. At least that is what I think the failure mode is, I have not rigorously determined a magic time.
ETA: It works if I clear the cache or refresh the page.
I have put a superfluous time parameter in the post data, and set cache:false in the ajax call.
The data is not cached since if I change the expected data it will fill it in properly.
Another update:
A missing piece of data. This is a Facebook app. That turns out to be crucial. I sniffed both the working and not working sessions with Wireshark. It turns out the difference is that the working session submits the Facebook cookies and the not working one doesn't.
So the question is now how to force the ajax call to include cookies. The descriptions I h开发者_StackOverflow社区ave found about the ajax call is that it includes cookies. Is the behaviour I am seeing a bug?
ETA:
The javascript:
$.ajaxSetup
(
{
// Disable caching of AJAX responses
cache: false
}
);
$(document).ready
(
function()
{
$('#shopTabs').tabs();
thing.create();
thing.editPicture();
$('#shopTabs').bind
(
'tabsselect',
function(event, ui)
{
thing.setReload(ui.index);
thing.setActive(ui.index);
}
);
}
);
// Must be global for Java to call
function reload()
{
thing.create();
thing.editPicture();
}
var thing =
{
reload : 0,
active : 0,
noOp : function()
{
},
create : function()
{
date = new Date();
$('#shopTabs1').load('create.php', {time : date.getTime()}, thing.linkform);
},
editPicture : function()
{
date = new Date();
$('#shopTabs2').load('editPicture.php', {time : date.getTime()}, thing.noOp);
},
linkform : function()
{
$('#upload').ajaxForm({target : '#shopTabs1'});
},
setReload : function
(
index
)
{
this.reload = this.reloadList[index];
},
setActive : function
(
index
)
{
this.active = this.activeList[index];
},
load : function
(
php,
args,
loadFn
)
{
var settings =
{
type : "POST",
cache : false,
url : php,
data : args,
context : this,
success : function (data)
{
$(this.active).html(data);
loadFn();
}
}
$.ajax(settings);
}
};
thing.activeList = ['#ui-tabs-1', '#shopTabs1', '#shopTabs2'];
thing.reloadList = [thing.noOp, thing.create, thing.editPicture];
In your thing.create function, add a changing query parameter, current date is good, or use a random number.
$('#shopTabs1').load('create.php?r='+escape(new Date().toString()), {time : date.getTime()}, thing.linkform);
or
$('#shopTabs1').load('create.php?r='+new Date().valueOf(), {time : date.getTime()}, thing.linkform);
same with your editPicture.
That will prevent IE from caching, as mentioned by Omu's answer
It turns out the problem was that IE officially expects a P3P header to load an iframe from a third third party site. Facebook implements apps using iframes from the app provider.
IE does not consistently fail if there is no P3P header.
精彩评论