Tuesday, October 07, 2008

jQuery IE7 load url problem

I blogged a few days ago about what I thought was a solution for an issue I
am having with jQuery and IE7. Alas the fix didn't work and I deleted the misleading post.

Ironically, the removed post has generated a lot of hits which end up 404-ed, so I thought I'd put this back up and see if someone can help.

For some strange reason, some urls just seem to not work in IE7 with jQuery Load().

IE7 doesn't even fire a request off to the server, which I monitored with Fiddler2. It's rather wierd, coz all the pages work fine in Firefox (no suprise there) and other links which re-use the same code on the same page also work fine in IE7.

Using trustly old Javascript Alerts I confirmed that the code was being run.

I am using the excellent CFJQAJAX jQuery ajax tags for Coldfusion which are nice and lightweight when compared to the rather heavy bundled CFAJAX tags. I highly recommend trying them out.

With Nokia and Microsoft getting on board, it's starting to look like jQuery is becoming the defacto standard ajax library.

IE7 does feel rather prehistoric these days... Anyway, anyone got any ideas on how to solve this?

Update: fixed the case of jQuery in this entry, also this works on some IE7 machines and not on others, same build too!

Update2: Thanks to Dan I fixed it, Damn stupid IE caching, that's so 1990's... why can't they just make their browser faster and not just dumber....to think people use that pile of rubbish for business

30 comments:

Rey Bango said...

Can you post a link? Also, jQuery is spelled with a lowercase "j". Very common typo. :)

Rey
jQuery Team

Dan G. Switzer, II said...

Have you tried adding a tick count or UUID to your query to make sure the url is unique. jQuery should be adding a time stamp, but it might be worth adding something else to randomize the URL just to try and force IE7 not to use it's cache.

Zac Spitzer / Fastmovingtarget said...

@rey, ahh oops.... gotta love the way us techs play with english!

@dan the problem is it doesn't even get that far to make the request....if it was a cache problem, i would still see a result right, just the wrong one?

more testing by others on my team show that sometimes this works with the same IE7 build on other machines... double grrrrrr....

I will try and find time to knock up a public demo tonight, oz time

Zac Spitzer / Fastmovingtarget said...

Ok, fall on my sword....

Dan your suggestion worked...

IE7 is sooo extremely f$%#$%#king brain dead....

Dave Bui said...

Hi Zac,

Could you please more specific how did you do to make it works?

I used this
$(document).ready(function() {
$("#ajaxbegin").load("em-matches-list.php","",setstart);
});

but it does not work at all.

Thanks,

Dave

Zac Spitzer / Fastmovingtarget said...

try adding a random number to the url string

"em-matches-list.php?random=" + Math.random()*99999

that way IE won't cache the result

Johnny said...

Yes! Now my requests are getting to the server. Sadly, no change on the IE front. Still no content. sigh.

Maybe I'll just make a page full of tables...

Zac Spitzer / Fastmovingtarget said...

check that your html is nice and valid, ie no stray tags

Manoel Carvalho said...

I have the same problem. IE7 make the request, but, sadly, don't work. I'm using IEWatch, an ie plugin to watch all http requests, and ie7 really make the connection, but if i put alert($('#my_div').html()); (after my load()), it shows a empty message box. It happens in some cases, not all.

Vladi said...

Zac! The math random function worked the magic for me! Thanks so much for your help!

Anonymous said...

Just wanted to mention, i wasn't getting content loading in IE but was in other broswers. I verified it wasn't a caching problem. However as a previous poster pointed out you cannot have any unclosed or open tags other wise the html will break on insert. For example I had a random closing div in my html, once I cleaned that my content showed up in IE.

Jeff Hobbs said...

I'll add my experience here too -- adding the random number string and making sure that all the tags were unbroken (in my case, it was the *title* tag WTF) fixed IE + jQuery load.

Stupid, stupid IE.

johnHoysa said...

$.ajaxSettings.cache = false;

That worked for me.

Tim Boormans said...

I added the random number and it also solved my problem. But i also have read about the possibilities with the math function on this blog, which is not really safe enough + it is a lot of typing horror which jQuery just likes to remove (type less, do more). Also taking the power of only 1 unique number does not make the number more unique.

I wrote a simple function for creating a more better unique key which can be run with easy while programming with jQuery. I like to share it with you:

function unique_requestid() {
var timestamp = Number(new Date()).toString();
var random = Math.random() * (Math.random() * 100000 * Math.random() );
var unique = new String();
unique = timestamp + random;
return unique;
}

Just put this function above somewhere in your javascript file. Loading an url with jQuery now goes like this:

$('#Your_Element_ID').load("/ajaxpage.php?a=get_something&random=" + unique_requestid());

That is client-side (like jQuery). But also serverside settings can be done to be assured IE7 is not using caching. With any PHP version for example you can take control over it with the PHP code I provide here (always place this on the very top of your script):

header( 'Expires: Sat, 01 Jan 1990 01:00:00 GMT' );
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' );

I hope this will help you all make your life a lot easier ;)

Have a nice day.

Regards,
Tim

MattR said...

Just an update for people trying to insert table rows in a <table>, in order for this to work i have to enclose all the rows in <tbody></tbody>...


Might be helpful to someone.

Alessio Evangelista said...

Hi All, i had the same problem, and i see that a simple document.getElementById("element_id").innerHTML works with both browsers IE and FF. I could not believe, but this worked for me in alternative for append().

justusromijn said...

johnHoysa said...
$.ajaxSettings.cache = false;

That and valid html-response did the trick for me.

Aloy said...

//Just an update for people trying to insert table rows in a table, in order for this to work i have to enclose all the rows in tbody /tbody...//

yes, this is also one of the reason when IE is not loading the content. I solved this kind of problem by closing the DIV tag properly

Kai Mattern said...

There is another quirk with IE7 that sometimes kills any .load() call:

IE7 seems to verify the html it is loading - and completely discards the answer if the result does not validate.

I was going crazy about a non working .load call, when I finally realized that I had misspelled a closing span tag.

Anonymous said...

thanks you very much document.getElementById("element_id").innerHTML works like a charm

Mike Rushworth said...

Hi All,

I've just tried the random argument that doesn't go anywhere, and it solved the problem. My code is :

var randomisedURL = "readdb.php?random="+Math.random()*99999;
$('#content-main').load(randomisedURL);

even though my readdb.php file does not expect a value called random passed to it. Thanks to Dan Switzer for the fix :)

Anonymous said...

WOW! the random url trick worked wonders! (after hours of trying to fix this....)Thanks!

Anonymous said...

The tbody tag issue was it for me. Thanks MattR!

Nick said...

The Math.random trick worked a treat. Thank you so much!

atltom331 said...

Still helping people in 2011! Was having an issue in ie7 where the ajax would work for a few times then stop working. cache:false fixed it. Thanks!

Cesar Augustus Silva said...

If anyone is still this problem, you can use the function I created.

http://blog.cesar.augustus.nom.br/js/loader.js

do not forget to download the file "json_sans_eval.js"
http://blog.cesar.augustus.nom.br/js/json_sans_eval.js

Anonymous said...

random function works!!!!
Zac Spitzer eres un genio

Tom Langstrom said...

Please allow me to share my own bit 'o stupid in here. I tried every 'solution' here. Nothing. Load worked great for everything (plus IE8), but not IE7. After hours of nothing, knowing I had the same code on another page that worked fine in IE7... DUH. The other page, the ID was a div. The one that was not working, I had placed the ID in a TABLE tag. Trying to populate a table with a table. IE8, FF, Chrome, all LOVED it, but not IE7. Its my fault, NOT IE. Just wanted to share in case someone else does the same thing. Thanks.

Nicholas Tunney said...

@Tom - Would you believe I just made the same mistake! Wrapping in a container div fixed it right up for me. Thanks!

John Greer said...

Still helpful in 2013 (using IE10 with <meta http-equiv="X-UA-Compatible" content="IE=9" />)

Adding:

$.ajaxSettings.cache = false;

before the load just saved me hours of grief. Here is my implementation:

function getSelectionGridRows() {
$.ajaxSettings.cache = false; // Without this, IE will not update the UI.
View.SelectionGridDiv.load("AttachFilesStep #selectionGridDiv");
}