CODEWITHSUNDEEP
javascriptjqueryajaxoptimization
mllamazares
mllamazares

Reputation: 8166

How to load pages via ajax caching the content?

I have to load the sections of my web dinamically, so as I want to load the content only one time I did one <div> for each page:

<a href="#" data-pageindex="0">Home</a>
<a href="#" data-pageindex="1">Contact</a>
<a href="#" data-pageindex="2">Portfolio</a>

<div id="page-home"></div>
<div id="page-contact"></div>
<div id="page-portfolio"></div>

Then I thought in something like this to do the ajax call (the point in this case is reduce the HTTP requests putting all the code of each section (initialitation of plugins mostly) in the same file):

$("[data-pageindex]").on("click", function(e){
    var index = parseInt($(this).data("pageindex"));

    $("nav li").removeClass('active');
    $(this).parent().addClass('active');

    load_section(index);

    e.preventDefault();
    return false;
});

function load_section(index_load){

    // 'urls' is an array with all the section names.
    var id_section = "#page-" + urls[index_load]; 

    if (! isEmpty( $(id_section) ) ){
        return;
    }

    console.log(id_section);

    switch(index_load){
        case 0: $(id_section).load("/application/ajax/home.html", load_home); break;
        case 1: $(id_section).load("/application/ajax/contact.html", load_contact); break;
        default: $(id_section).load("/application/ajax/portfolio.html", load_portfolio);
    }
}

And here I have the callback functions where I execute the code for each section:

function load_home(){
    // 180 lines of code
}

function load_contact(){
    // 104 lines of code
}

function load_portfolio(){
    // 95 lines of code
}

It works, but I don't think is the best way to do it. Would be better use $.getScript() function instead of the code above? You have any clearer alternative to do it?

Upvotes: 0

Views: 105

Answers (1)

Minko Gechev
Minko Gechev

Reputation: 25682

The current solution works fine. You can cache the loaded templates in a hashmap and add one more level of indirection:

var templateCache = {};

function load_section(index_load) {
    // 'urls' is an array with all the section names.
    var id_section = "#page-" + urls[index_load]; 
    if (! isEmpty( $(id_section) ) ){
        return;
    }

    var url, callback;

    switch(index_load){
        case 0: url = "/application/ajax/home.html"; callback = load_home; break;
        case 1: url = "/application/ajax/contact.html"; callback = load_contact; break;
        default: url = "/application/ajax/portfolio.html"; callback = load_portfolio;
    }
    handleSection(id_section, url, callback);
}

function handleSection(id_section, section, callback) {
    if (templateCache[section]) {
        callback(templateCache[section]);
        return;
    }
    $(id_section).load(section, function (template) {
       templateCache[section] = template;
       callback.call(null, template);
    });
}

Similar caching strategy is used in AngularJS by the service $templateCache.

Upvotes: 1

Related Questions