CODEWITHSUNDEEP
phpjavascriptajaxjquery
Josh Levinson
Josh Levinson

Reputation: 301

Caching Ajax Request

Languages/Software/Technologies in use: PHP, MySQL, WordPress, Javascript, jQuery (latest).

I have two select elements on a page - one for state and one for city.

The state element is filled on document.ready by an Ajax call to a function that retrieves available states from a database. The city element is filled via an Ajax call on the state element change event, based on the available cities in the state chosen, again from the database.

I'm trying to learn how to cache (maybe not the right term) the requests so that the available cities stick around in the case that an already-chosen state is re-picked after moving away from it. E.g. the first time I pick a choice, I pick NC. The next choice I pick is NY. I then come back to NC; currently the ajax call is made again after coming back to NC. I'd like the results to be stored so there aren't so many queries being thrown around.

Any suggestions welcome, I'm still digging! Thanks.

function get_cities(state){
    $.ajax({
        type:'POST',
        data:{action:'generate_city_inputs', state:state},
        cache: true,
        dataType: 'json',
        async:false,
        url: "<?php echo site_url().'/wp-admin/admin-ajax.php'; ?>",
        success: function(value) {
            cityhtml = '';
            for (var i = 0; i < value.length; i++) {
                cityhtml += "<option value=\"";
                cityhtml += value[i][0] + "\">";
                cityhtml += value[i][0] + "</option>";
            }
            $("select#search-city").empty().append(cityhtml);
        }
    });
}

In the above code, the state is the two letter code, passed elsewhere from the state element change event. The PHP function called by this ajax call takes care of the select statement using the state parameter.

Upvotes: 0

Views: 2947

Answers (1)

pseudosavant
pseudosavant

Reputation: 7234

I would just store the cities response for the state in an object like this:

// Declared at the top of your script, global.
var cachedCities = {};

Change your get_cities code like this so it checks the cache first. If it is empty then do the ajax call. The success callback populates the cache. The code for populating your select box is broken out into populateCities().

function get_cities(state){
    if (cachedCities[state]) {
        var value = cachedCities[state];
        populateCities(value);
    } else {
        $.ajax({
            type:'POST',
            data:{action:'generate_city_inputs', state:state},
            cache: true,
            dataType: 'json',
            async:false,
            url: "<?php echo site_url().'/wp-admin/admin-ajax.php'; ?>",
            success: function(value) {
                cachedCities[state] = value;
                populateCities(value);
            }
        });
    }
}

var populateCities = function(value) {
    cityhtml = '';
    for (var i = 0; i < value.length; i++) {
        cityhtml += "<option value=\"";
        cityhtml += value[i][0] + "\">";
        cityhtml += value[i][0] + "</option>";
    }
    $("select#search-city").empty().append(cityhtml);
}

Upvotes: 3

Related Questions