Geek asks and answers

Multiple ajax requests - jQuery

I have javascript as below:

$.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')");
        }
      });
$.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title3").html()
        },
        success: function(response){
          $cell3.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });
$.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title4").html()
        },
        success: function(response){
          $cell4.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });

and much more ... Every time I want a result, I have to use ajax, and this made the script long. Is there a way to shorten the code?

You can see my full code here . I will be very grateful if someone corrects my code.

Thanks for the help..

blasteralfred

+3
source share
6 answers

I solved this using the following script;

<script type="text/javascript">
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");
    updateBackground("res3", "title3");
    updateBackground("res4", "title4");
});
</script>
0
source

How to make a function for you?

function updateImage(title, cell) {
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
            filename: title
        },
        success: function (response) {
            cell.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
    });
}

Then you can call this:

updateImage($('#title1').html(), $cell1);
updateImage($('#title2').html(), $cell2);
updateImage($('#title3').html(), $cell3);
updateImage($('#title4').html(), $cell4);
+2
source 
function myJax(file,successBlock){
$.ajax({
    type: "POST",
    url: "ajax.php",
    data: {
      filename: file
    },
    success: function(response,successBlock){
      successBlock.css("background-image", "url('pdfthumb/" + response + ".jpg')");
    }
  });
};
myJax($("#title1").html(),$cell1);
myJax($("#title2").html(),$cell2);
// etc...
0

, , . , $.ajax , . -

function myAjax(mdata,mcallback){
$.ajax({
        type: "POST",
        url: "ajax.php",
        data: mdata,
        success: function(response){
mcallback(response);
        }
      });
}

You can then go

myAjax($("#title3").html(),callback);
0

javascript,

function ajax_call(urlString,title,cell)
        {
            ret_val="";
            $.ajax
            (
                {
                    type: "POST",
                    url: urlString,
                    data: {
                      filename: $("#"+title).html()
                    },
                    success: function(response){
                      $("#"+cell).css("background-image", "url('pdfthumb/" + response + ".jpg')");
                    }
            );
            return ret_val;
        }

,

ajax_call("http://xyz.com","title1","cell1");
ajax_call("http://xyz.com","title2","cell2");

To do this, you need to figure out a way to identify cell1, cell2 ... I assume that it will have an html identifier for identification

0
source

If all calls are made immediately after each other, it might be worth trying to get a list of Urls in one call to get a list of issued titles. those. if necessary, you need to make only one ajax call.

0
source

More articles:


All Articles