Question

Nothing is currently broken. 🙂 I’m just looking to gain some performance.

I have a form with chained select (one drop down changes, and the second drop down value changes). Right now, my form will perform an ajax call to another page and retrieve the contents as json data string. This is fast but if the data was already retrieved (e.g. stored in memory), the changes would be instantaneous instead of the slight delay. Can I change the call this function to something that runs within the page? For example, jQuery Autocomplete does this (look at the source code). Right now, when you change the value for the operating system, the list of models will change. If i loaded the modele in memory, I’d need to model the json string to include which options corresponded to the operating systems.

To put it in other words, can I create the json string and store it in memory and then just reference this data instead of making a separate ajax call?

function updateModels(i){
    var pltfrm = $(i).val();
    var firstOption = $(i);
    var model = firstOption.parent().next().find('.model');
    $.getJSON("index.cfm?do=misc.getModels&platform=" + pltfrm,
    function(j){
        var options = '';
        for (var i = 0; i < j.length; i++) 
        {
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
    model.html(options);
    });
}

My json data is curently formatted for the LINUX OS:

[
{"optionValue":"","optionDisplay":"Select a model"},
{"optionValue":"Dell 2850","optionDisplay":"Dell 2850"},
{"optionValue":"Dell 2950","optionDisplay":"Dell 2950"},
{"optionValue":"Dell 2970", "optionDisplay":"Dell 2970"},
{"optionValue":"Dell 6850", "optionDisplay":"Dell 6850"},
{"optionValue":"Dell R710", "optionDisplay":"Dell R710"}
]

This is very low priority but I know it would help performance so if you have time and are willing to work with me, I’d sure appreciate it.

Answer 1

Sure, just save the data in the localStorage:

function updateModels(i){
    var pltfrm = $(i).val();
    var firstOption = $(i);
    var model = firstOption.parent().next().find('.model');

    var storedItemSerialized = localStorage.getItem('model' + pltfrm), storedItem = {};

    var redrawModels = function (j)
    {
        var options = '';
        for (var i = 0; i < j.length; i++) 
        {
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        model.html(options);

    }


    if (storedItemSerialized)
    {
       redrawModels($.parseJSON(storedItemSerialized));
    }
    else
    {

      $.getJSON("index.cfm?do=misc.getModels&platform=" + pltfrm,
      function(j){
        localStorage.setItem('model' + pltfrm, JSON.stringify(j));
        redrawModels(j);
      });

    }
}

This method has the added benefit of saving the data through page requests.