How to avoid duplicate rquests with jQuery AJAX

Question

Here I have one requirement with AJAX and I gave one url(UpdateURL) to the url param. In success case I'm going to call one dataTable(called loadGrid()), here I need to call same url(UpdateURL) to the loadGrid(), meanwhile I'm calling two times same url(UpdateURL), it causes duplicate requests. Can any one help me how to use url(UpdateURL) single time and avoiding duplicate requests. Sorry for the confusion. Here is my code,

$("#UploadButton").click(function(){ 
$("#idLoading").show();     
          var UpdateURL="some url"; 
          $.ajax({ 
          type: "post", 
          url: UpdateURL,     // calling first time  
          dataType: "json", 
          cache : false, 
          success: function(response) {         
            loadGrid(UpdateURL);  // calling second time
            $("#idLoading").hide(); 
          }, 
          error: function (xhr, status) {   
                     $("#idLoading").show();
                     timeout_trigger();
          }    
       });  
  });  

function loadGrid(url){
    $.getJSON(url,function (output)
    {
        try
        {
          var pdlJsonObj = output.aaData;               
                  var tdata  = $("#IdDatatble").dataTable({
                        "aaData": pdlJsonObj,
                        "bDestroy": true,   
                        "sPaginationType": "full_numbers",                                     
                        "aaSorting": [],                                    
            "fnCreatedRow": function (nRow, aData, iDisplayIndex, iDisplayIndexFull)
                            {                           
                            $(nRow).attr('id', iDisplayIndex);
                            },
             "fnInitComplete": function ()
                            {                           
                           $("#IdDatatble tbody tr:eq(0)").find('td').each(function () { });
                    }
            });
        }

        catch(err)
        {
            alert(err.message);
        }       

    });
}

Why not save the response data in a global variable and make it available to both functions? — sideroxylon
– sideroxylon, Commented Feb 23, 2015 at 11:29

Paulo Segundo · Accepted Answer · 2015-02-23 11:37:23Z

Can't understand why you need to call a ajax and a getJson for the same thing, try this:

$("#UploadButton").click(function(){
    var UpdateURL="some url"; 
    $("#idLoading").show();     
    loadGrid(UpdateURL);
});  

function loadGrid(url){
    $.getJSON(url,function (output)
    {
        try
        {
          var pdlJsonObj = output.aaData;               
                  var tdata  = $("#IdDatatble").dataTable({
                        "aaData": pdlJsonObj,
                        "bDestroy": true,   
                        "sPaginationType": "full_numbers",                                     
                        "aaSorting": [],                                    
            "fnCreatedRow": function (nRow, aData, iDisplayIndex, iDisplayIndexFull)
                            {                           
                            $(nRow).attr('id', iDisplayIndex);
                            },
             "fnInitComplete": function ()
                            {                           
                           $("#IdDatatble tbody tr:eq(0)").find('td').each(function () { });
                    }
            });
        }

        catch(err)
        {
            alert(err.message);
        }       

    }).done(function( json ) {
        $("#idLoading").hide(); 
    })
    .fail(function( jqxhr, textStatus, error ) {
        $("#idLoading").show();
        timeout_trigger();
    });
}

Collectives™ on Stack Overflow

How to avoid duplicate rquests with jQuery AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related