CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajaxcaching
randombits
randombits

Reputation: 48450

jQuery ajax cache response

I am using jQuery's $.ajax() method in order to issue an XHR based HTTP GET to retrieve a partial of HTML from a Ruby on Rails site. In this particular case, whenever a use clicks on a tabbed navigation, I updated an HTML table with data that comes back from the server. The thing is, once the data is available on the server, it never changes. When a user clicks from one tab to the next, it needlessly makes more XHR requests to the server for data that it should already have and/or be cached. I tried using the cache: true attribute, but I don't think that works like I thought it would. Here's an example of my script:

 $.ajax({
      url: "/nba/value_charts/" + site_id + "/" + t_date,
      cache: true
    })
    .done(function( html ) {
      $("#vr").html(html)
      $(".value-charts").tablesorter(); 
 });

Is there something I could do so that when a tab is re-clicked it uses the HTML over it fetched previously at least until the user refreshes the page? It should only make the XHR request if the cache does not exist. Is this currently builtin to jQuery or do I have to write the logic myself for it to work?

Upvotes: 2

Views: 2773

Answers (2)

Kevin B
Kevin B

Reputation: 95022

If you want to avoid sending the request, you'll have to do that yourself.

window.ajaxCache = {};

// later on:
if (!window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date]) {
    window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date] = $.get("/nba/value_charts/" + site_id + "/" + t_date);
}
window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date].done(function( html ) {
    $("#vr").html(html)
    $(".value-charts").tablesorter(); 
});

All cache: true does is avoid setting a _ parameter to prevent caching, allowing the browser to cache it just like it would an image, assuming the server is returning headers that tell the browser to cache it.

this is easy enough to abstract behind a function:

getCachableData = (function(){
    var ajaxCache = {};
    return {
        get: function(url) {}
            if (!ajaxCache[url]) {
                ajaxCache[url] = $.get(url);
            }
            return ajaxCache[url];
        },
        clear: function(url) {
            if (url) {
                ajaxCache[url] = false;
            }
            else {
                ajaxCache = {};
            }
        }
    };
})();

// later on...
getCachableData.get("/nba/value_charts/" + site_id + "/" + t_date).done(function(html){
    $("#vr").html(html)
    $(".value-charts").tablesorter(); 
});

Upvotes: 1

Brad M
Brad M

Reputation: 7898

What is t_date?

If you are appending a timestamp to the url (which is what cache: false does), then the browser will always send the new request, since it considers all unique url / query string parameters as unique GET requests.

Does the response to your request have a cache-control header? If that is set to no-cache, then the browser would also request the resource each time.

Upvotes: 0

Related Questions