Tutorial: How to stop caching with jQuery and javascript

There are many reason people want to disable or stop caching by broswer. Especially when we are dealing with dynamic content that required the latest version to be displayed on the browser. However, due to security reason there are no perfect methods in javascript that can disabled caching for all browsers. In this tutorial, i will demonstrate a few way both javascript and jQuery used to stop or disable caching by browsers.

jQuery

On the later version of jQuery v1.2 above, jQuery has provided a method to stop caching by browser with its ajax class. You can visit jQuery website to see the list of update on v1.2 and you will notice that they have now included a function to disable caching! You can either choose to control the way each individual dynamic content cached by setting the properties to true/false or you can just set a default to disabled all browser caching.

In order to determine each ajax call caching properties,

$.ajax({
url: 'test.html',
cache: false,
success: function(html){
$('#results').append(html);
}
});

which is being reflected on the jQuery example. And in order to disable all caching by the browser we can do the following,

$.ajaxSetup({cache: false}});

This will have to be placed on top of the script in order for it to work.

Javascript

The reason why browsers are able to cache a particular document is due to the url being passed to the browser are identical. In order to make it unique for each passes, we can place in a random number behind the url as shown below,

var img.src = 'www.hungred.com'+'?'+Math.random()*Math.random();
return $(img).load(function()
{
alert('completed!');
});

This method will ensure all document to be unique for every dynamic passes you throw to the browser which i find it more reliable and useful as this method has been there for quite sometimes and almost all of the browser will support such way of retrieving dynamic content.

HTML (16/04/2009)

You can also disable or stop caching using  the following meta tag,

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

This will prevent the whole page from being cached by the browser as well.

 

Like this post? Share it!

digg 48 Tutorial: How to stop caching with jQuery and javascript reddit 48 Tutorial: How to stop caching with jQuery and javascript stumbleupon 48 Tutorial: How to stop caching with jQuery and javascript delicious 48 Tutorial: How to stop caching with jQuery and javascript furl 48 Tutorial: How to stop caching with jQuery and javascript technorati 48 Tutorial: How to stop caching with jQuery and javascript google 48 Tutorial: How to stop caching with jQuery and javascript myspace 48 Tutorial: How to stop caching with jQuery and javascript facebook 48 Tutorial: How to stop caching with jQuery and javascript twitter 48 Tutorial: How to stop caching with jQuery and javascript

About Clay

I am Clay who is the main writer for this website. I own a small web hosting company in Malaysia and i'm available to be hired as individual contractor on elance or odesk. You can find me on twitter.
This entry was posted in How-to, JavaScript, jQuery and tagged . Bookmark the permalink.

4 Responses to Tutorial: How to stop caching with jQuery and javascript

  1. Pingback: 網站製作學習誌 » [Web] 連結分享

  2. Pingback: Pages tagged "javascript"

  3. Kevin says:

    Clay,

    Nice script for the no cache.

    RE: Javascript
    When tested with IE 8, I receive the following error:
    Expected ‘;’

    Char: 8 on this line: “return $(img).load(function()”

    Any ideas how to fix this?

  4. Clay says:

    IE is very strict and troublesome. Therefore i guess the problem you are facing there is you are returning some weird stuff after you have perform a load function. The return value is definitely a jQuery object. You may want to separate that sentence. Don’t think it has anything to do with caching :D

    Clay