Today I would like to share with you a quick solution to the common problem when your AJAX calls to some page that changes over time is not being loaded to your page. In other words, jQuery or your browser is not loading new version of the page.
This problem is common in Mozilla Firefox (FF). Internet Explorer (IE) users I believe, do not experience this problem. Usually it occurs when you use jQuery AJAX functions in javascript setInterval() method. Basically, what happens is that Firefox can not see the changes been made to the page and thinks it’s the same with the old one. So Firefox loads it from cache and you don’t see the new version of your page. To resolve this issue, you should simply add a random string to the request like below.
The solution:
// Reload mypage.html every 5 seconds
var refresh = setInterval(function()
{
// Minimized code, suggested by Kovacs
$('#mydiv').load("mypage.htm?" + 1*new Date() );
}, 5000);
This is not a good solution, this disables cache.
ReplyDeleteBetter one is to set correct http headers on requested script..
shorter formula:
ReplyDelete$('#mydiv').load("mypage.htm?"+1*new Date());
@Anonymous, This disables the cache and that is exactly what we are trying to achive if you can't (or don't know howt to) change the server side file.
ReplyDelete@Kovacs, I did not know about the multiplication with numeric value resulting in change of Date() output... Thanks, I would update my post ...
FYI - You can achieve the same thing by using $.ajax(...) (instead of .load(...)) and set the "cache" option to "false". It's a little more work to use this method but ultimately gives you a lot more control/flexibility.
ReplyDeletehttp://docs.jquery.com/Ajax/jQuery.ajax#options
@Andrew, I agree, but some people do not need all the flexibility and power of $.ajax(). All they want to do is to load an external content through AJAX call.
ReplyDeleteYou can't dismiss the fact that .load() function makes your code more readable as well :)
Thanks a lot man!
ReplyDeleteThis small example just saved me a lot of time!!!
But i had issues with IE and not with Firefox. Anyway thanks!
A good personal solution! ;)
ReplyDeleteSame operation is maked that:
var refresh = setInterval(function(){ // Minimized code, suggested by Kovacs $('#mydiv').load("mypage.htm?" + Math.random() );}, 5000);
If we need an operation more complex than this, i prefer to use $.ajax
How I can do the same but without refreshing every 5 sec?
ReplyDeleteFor example, I have a link and I want every time I click it load the result of a page.
This is my code:
$('selector').click(function() {
$('another_selector').load(url + 1*new Date());
});
});
I resolved the problem!
ReplyDeletebefore the call to fadeOut(), I place a fadeIn() an...Voilá! :D
Second time I clic the link, the efect shows as I wish it.
i have been facing this problem for last three days. thanks a lot. i have used a random number insteam of Date().
ReplyDelete@Anonymous, that should make it. If you are getting 404 error, then it is possibly because you forgot to add "?" between your URL and random string:
ReplyDelete$('selector').click(function() {
$('another_selector').load(url + "?" +1*new Date());
});
});