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?

Answer 1

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