4

I'm using the jQuery .get() function to load in a template file and then display the loaded HTML into a part of the page by targeting a particular DOM element. It works well but I've recently realised for reasons that confound me that it is caching my template files and masking changes I have made.

Don't get me wrong ... I like caching as much as the next guy. I want it to cache when there's no timestamp difference between the client's cache and the file on the server. However, that's not what is happening. To make it even odder ... using the same function to load the templates ... some template files are loading the updates and others are not (preferring the cached version over recent changes).

Below is the loading function I use. 

function LoadTemplateFile ( DOMlocation , templateFile , addEventsFlag ) {
    $.get( templateFile , function (data) {
        $( DOMlocation ).html(data);
    });
}

Any help would be greatly appreciated.

NEW DETAILS: I've been doing some debugging and now see that the "data" variable that comes back to the success function does have the newer information but for reasons that are not yet clear to me what's inserted into the DOM is an old version. How in heck this would happen has now become my question.

ken
  • 8,763
  • 11
  • 72
  • 133
  • Have you looked at exact requests performed and their headers – zerkms May 15 '12 at 23:10
  • Just add a random value to the querystring for `templateFile`, or turn caching off in `ajaxSetup()`. Unless the returned HTML is huge, caching is really not needed for smallish ajax calls. – adeneo May 15 '12 at 23:12

3 Answers3

5

You can set caching to off in the jQuery.get() call. See the jQuery.ajax() doc for details with the cache: false option. The details of how caching works is browser specific so I don't think you can control how it works, just whether it's on or off for any given call.

FYI, when you turn caching off, jQuery bypasses the browser caching by appending a unique timestamp parameter to the end of the URL which makes it not match any previous URL, thus there is no cache hit.

You can probably also control cache lifetime and several other caching parameters on your server which will set various HTTP headers that instruct the browser what types of caching to allow. When developing your app, you probably want caching off entirely. For deployment, I would suggest that you want it on and then when you rev your app, the safest way to deal with caching is to change your URLs slightly so the new versions of your URLs are different. That way, you always get max caching, but also users get new versions immediately.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks jfiend00. I hadn't thought of looking at the caching parameters on my webserver. That's worth a look. – ken May 15 '12 at 23:21
  • Jfriend00, thanks. I have used the ajax() call and turned off caching. Not ideal but it works. – ken May 16 '12 at 15:54
2

$get will always cache by default, especially on IE. You will need to manually append a querystring, or use the ajaxSetup method to bust the cache.

Community
  • 1
  • 1
Peter J
  • 57,680
  • 8
  • 38
  • 45
  • Thanks Peter. Sadly I really do want the cache but not one that NEVER updates. :^/ – ken May 15 '12 at 23:21
  • Yeah, on IE especially, you will see that if the URL matches, it won't even make an HTTP request to check if the etag / last modified has been altered. – Peter J May 15 '12 at 23:23
  • Well I found that it worked fine on Safari with my original setup but Chrome was completely unpredictable WRT to caching. I eventually just switched to an ajax() call so that I could turn off caching. – ken May 16 '12 at 15:52
  • I may come back to this at some point and see if I can get it to cache AND behave rationally but for now I'll live with a cacheless solution. – ken May 16 '12 at 15:53
0

As an alternative, I found in the jQuery docs that you can just override the default caching. For me I didn't have to convert all of my $.get over to $.ajax calls. Note that this also overrides default behavior for all other types of calls, like $.getScript which has the opposite default behavior of cache: false from $.get.

https://api.jquery.com/jquery.getscript/

  $.ajaxSetup({
    cache: false
  });
klappy
  • 46
  • 1
  • 4