Custom jQuery function for multiple ajax requests

Question

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?

are you changing the background image based on the image selected and uploaded by the user??? — abhijit
– abhijit, Commented Jun 7, 2011 at 13:49

daybreaker · Accepted Answer · 2011-06-07 13:53:09Z

1

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.

answered Jun 7, 2011 at 13:53

daybreaker

1,4401 gold badge11 silver badges18 bronze badges

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

1 Comment

Neeraj Over a year ago

upvoting your answer, as this is cleaner

dvir · Accepted Answer · 2011-06-07 13:50:39Z

0

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

answered Jun 7, 2011 at 13:50

dvir

5,1241 gold badge25 silver badges32 bronze badges

1 Comment

daybreaker Over a year ago

This still requires that you specifically name every single cell and title in your document.ready. What if you add one or remove one from the HTML, and forget to update the javascript? It will throw an error because that cell wont be found.

Neeraj · Accepted Answer · 2011-06-07 13:49:58Z

0

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)

answered Jun 7, 2011 at 13:49

Neeraj

8,5528 gold badges43 silver badges71 bronze badges

3 Comments

Alfred Over a year ago

so how it will be if i have a specific number say 6 cells (title1-title6)

daybreaker Over a year ago

There are easier ways with jQuery than to hardcode the number of cells, or hardcode the cell titles. The answer the OP accepted may work, but its still messy.

Neeraj Over a year ago

yes I know that, making them all belong to a class, or even using the partial name selector could have done the trick, but the OP already had a way of approaching the issue, and I simply told him how to achieve it.

ShankarSangoli · Accepted Answer · 2011-06-07 13:52:05Z

0

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

answered Jun 7, 2011 at 13:52

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

2 Comments

Alfred Over a year ago

how?? i dont know how to do that.. can u post??

Neeraj Over a year ago

This would require the server-side script to return the specific changes, only client side will not suffice for this specific solution

Collectives™ on Stack Overflow

Custom jQuery function for multiple ajax requests

4 Answers 4

1 Comment

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related