SHARE:

Author: Posted on December 5, 2012 at 8:32 pm
CSS/HTML, jQuery, PHP
TUTORIALS
2

jQuery AJAX cache, simple but powerful concept

This quick tutorial will show a simple but powerful concept of caching jQuery AJAX results to preven multiple AJAX requests when not necessary.

This simple example takes the popular implementation of having two (or more) select boxes where one select box’s selection impacts the options available in the second.

First off, take a look at this small HTML snippet which shows two select boxes, one with available options and the other empty, waiting to be populated.

<select name="selectOne" id="selectOne">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<select name="selectTwo" id="selectTwo"></select>

One problem with this implementation is that every time the user changes the first select box a AJAX request has to be made to populate the second, this particularly becomes a problem if the user uses the keyboard to tab and flick though the options at a quick rate.

The simple solution to this problem is to cache the results for the different selections, take a look at the following jQuery code.

$(function() {
    var cache = new Array();
    $("#selectOne").change(function(){
        var val = $(this).val();
        if (cache[val].length == 0) {
            $.ajax({
                url: 'someurl',
                data: {
                    option: val 
                },
                success: function(data) {
                    $.each(data, function(){
                        cache[val].push(this);
                    });  
                }
            });
        }
        var options = "";
        $.each(cache[val] , function(){
            options += "<option value='" + this + "'>" + this + "</option>";
        });
        $("#selectTwo").html(options);
    });
)};

Here we can see the .change event which is triggered when the user changes the first select boxes option. We have a variable declared as cache, every time the the option is changed, before doing the AJAX request we check to see if the cache array has been populated for the value that the first select box has been changed to.

So the first time the first select box is changed to option two, the jQuery checks the length of the cache[2] array and realizes that it is 0, it then performs the AJAX request which we can assume returns a set of results which are to be populated into the second select box. Before we do this, we add the results to the cache array for use next time.

The second time the option is changed to option 2, then the jQuery skips the AJAX request and just uses the values which are in the cache array. This means there are no unneeded requests and ensure that you web page or application is quick and snappy. That’s SMART WEB DEVELOPMENT. I hope this helps someone. Please leave any questions or comments in the comment box below!

  • /li>
  • Philippe Santana Costa

    Neat, man! I’ll give it a go in my next project.

    • revillwebdesign

      Excellent! Let me know how it goes :) Thanks for commenting.

  • REVIEWS

  • No categories have been added yet

TABLE OF CONTENTS