CODEWITHSUNDEEP
jquery
Alfred
Alfred

Reputation: 21386

Custom jQuery function for multiple ajax requests

I have a jQuery script to change background image with respect to ajax call back 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?

Upvotes: 1

Views: 749

Answers (4)

daybreaker
daybreaker

Reputation: 1420

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.

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

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

Upvotes: 0

dvir
dvir

Reputation: 5115

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");
});

Upvotes: 0

Neeraj
Neeraj

Reputation: 8532

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)

Upvotes: 0

Related Questions