jquery/ajax load scripts - best practices

Question

I'm trying to get the hang of using ajax loads (mostly via jquery) to make my site more efficient. Wondering if anyone can provide any suggestions re "best practices" for using ajax?

Is there a way to simplify a script for multiple ajax calls? For example, I currently have the working script:

$(document).ready(function() {
  $('#dog').click(function () {
      $('#body').load("dog.html");      
  });
  $('#cat').click(function () {
      $('#body').load("cat.html");      
  });
  $('#bird').click(function () {
      $('#body').load("bird.html");     
  });
  $('#lizard').click(function () {
      $('#body').load("lizard.html");       
  });
});

The script just gets longer and longer with each additional function. Is there a simpler, more efficient way to write this script to cover multiple load scripts?

Also, should I be using ajax loads to replace the majority of actual links?

Sergio · Accepted Answer · 2014-01-19 18:13:12Z

2

Here is a suggestion, since the code you posted seems to have a pattern between the id and the filename:

$(document).ready(function () {
    $(document).on('click', 'commonParentElementHere', function (e) {
        $('#body').load(e.target.id + ".html");
    });
});

This suggestion uses .on() and you just need to add a commonParentElementHere, a id or a class of the common parent of those elements.

Another option is to use a class on all elements that should be clickable, and then use the code passing the id to the html file name, like:

$(document).ready(function () {
    $(document).on('click', '.theCOmmonClass', function () {
        $('#body').load(this.id + ".html");
    });
});

edited Jan 19, 2014 at 18:13

answered Jan 19, 2014 at 18:07

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sergio Over a year ago

@user3180105, great! Glad I could help! Feel free to click to accept the answer. Cheers.

Musa · Accepted Answer · 2014-01-19 18:09:57Z

1

I'd say give all the elements you want to click on a class say ajax then.

$(document).ready(function() {
  $('.ajax').click(function () {
      $('#body').load(this.id + ".html");      
  });
});

answered Jan 19, 2014 at 18:09

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2014-01-19 18:16:28Z

Assuming that the id matches the file name the script can be simplified to:

$(document).ready(function() {
  $('#dog,#cat,#bird,#lizard').click(function () {
      var fileName = this.id + ".html";
      $('#body').load(fileName);      
  });
});

This script simply specifies each id in a single selector that separates each id with a comma. This will calls the click function to be fired for each element. With the anonymous function attached to the click event, the id of each element is obtained and concatenated to create the file name which is then passed to the load function.

If the id doesn't always match the element you could use the following approach.

var mappings = [
   {id: "fileName1", file:"file.html"},
   {id: "fileName2", file:"file2.html"}
];

    $(document).ready(function() {
        for(var i = 0; i < mappings; i++){
            createMapping(mappings[i]);
        }

        function createMapping(mapping){
            $("#" + mapping.id).click(function(){
               $('#body').load(mapping.file);      
            });
        }
    });

Collectives™ on Stack Overflow

jquery/ajax load scripts - best practices

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related