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
Tuesday, October 07, 2008
jQuery IE7 load url problem
Labels:
coldfusion,
javascript
31 comments:
Can you post a link? Also, jQuery is spelled with a lowercase "j". Very common typo. :)
Rey
jQuery Team
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.
@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
Ok, fall on my sword....
Dan your suggestion worked...
IE7 is sooo extremely f$%#$%#king brain dead....
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
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
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...
check that your html is nice and valid, ie no stray tags
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.
Zac! The math random function worked the magic for me! Thanks so much for your help!
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.
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.
$.ajaxSettings.cache = false;
That worked for me.
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
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.
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().
johnHoysa said...
$.ajaxSettings.cache = false;
That and valid html-response did the trick for me.
//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
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.
thanks you very much document.getElementById("element_id").innerHTML works like a charm
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 :)
WOW! the random url trick worked wonders! (after hours of trying to fix this....)Thanks!
The tbody tag issue was it for me. Thanks MattR!
The Math.random trick worked a treat. Thank you so much!
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!
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
random function works!!!!
Zac Spitzer eres un genio
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.
@Tom - Would you believe I just made the same mistake! Wrapping in a container div fixed it right up for me. Thanks!
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");
}
I've learn a few just right stuff here. Definitely value bookmarking for revisiting.
I surprise how so much attempt you set to make such a fantastic informative web site.
Post a Comment