Custom jQuery function for multiple ajax requests

I have a jQuery script to change background image with respect to ajax call ba开发者_运维百科ck as below;

<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $cell1 = $('#res1');
      $cell2 = $('#res2');
      $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title1").html()
        },
        success: function(response){
          $cell1.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });
      $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title2").html()
        },
        success: function(response){
          $cell2.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });

    });
</script>

I have $cell1, $cell2, #cell3... and much more.. and here only 2 is shown. But each time, when I want to change background, I have to call ajax and this made my script very lengthy. The way I believe to trim the code is to make a custom jQuery function for ajax request and change background.

How can I do this?

What does your HTML look like?

Assuming you have something like:

<div id="res1" class="cell">
    <h2 id="title1" class="title">Title</h2>
    <p>Some content</p>
</div>

<div id="res2" class="cell">
    <h2 id="title2" class="title">Title</h2>
    <p>Some content</p>
</div>

You can do:

$(document).ready(function(){
    $('.cell').each(function(){
        cell = $(this);
        $.post('ajax.php',{filename: $('h2.title', cell).html()}, function(){
            cell.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        });
    });
});

The benefit of doing it this way is it doesnt matter what your cell IDs are. You dont have to try to loop through a concrete set of numbers.

Something like:

function updateBackground(cellId, titleId) {
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#"+titleId).html()
        },
        success: function(response){
          $("#"+cellId).css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
    });
}

$(document).ready(function(){
    updateBackground("res1", "title1");
    updateBackground("res2", "title2");
});

What you can do is this:

changeBackground = function(response, num)
{
     $('#res'+num).css("background-image","url('pdfthumb/" + response + ".jpg')");
}

for(var i=0;i < maxNum ; i++ )
{
     $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title"+i).html()
        },
        success: function(response){
               changeBackground(response,i)
        }
      });
}

The changebackground is your custom function, and you make multiple ajax calls here too, but this is in a loop. maxNum is the number of times/dom object you want to change the background for.

NOTE: the objects should be names accordingly, this script is specifically for the templates you have defined here (i.e title1,title2 etc, res1, res2 etc should be names as they have been in your example script)

One way to optimize your code is combine your request and response. This way you will get all the background images in one request.