Home Sending two AJAX requests at the same time
Reply: 4

Sending two AJAX requests at the same time

artlemaks
1#
artlemaks Published in 2017-12-07 19:33:32Z

I am probably missing something very simple here, but what I am trying to do is update two divs on my page with AJAX requests that are called at the same time when an item is clicked.

I have looked at Two ajax requests on same event at same time . what should be the typical behaviour? how it is different if request is synchronous but unfortunatelly I am still missing something in the code.

I have the following javascript code

$(document.body).on('click', '.details', function(event) 
{
//  $(this) = your current element that clicked.
// additional code
var id = event.target.id;
//alert(id);
//alert($(this));
    _formurl    =   "home_stocktake_locations_list_group.php";
    _formdata   =   {'store_id' : id};
    _formurl2   =   "home_stocktake_list.php";
    $.ajax({ 

     type: "GET",
      url: _formurl,
      data: _formdata,
     success: function(xhrResponse)
     {
        $('#current').html(xhrResponse);
        var rowCount = $('#locations').length;          
        row_count = parseInt(rowCount) ;
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) 
      {
        $('#alert_msg').html(errorThrown);
        $('#alert_msg').fadeIn( "slow");

      }
}),
$.ajax({ 

     type: "GET",
      url: _formurl2,
      data: _formdata,
     success: function(xhrResponse)
     {
        $('#previous').html(xhrResponse);
        var rowCount = $('#dd_home_stocktake').length;          
        row_count = parseInt(rowCount) ;
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) 
      {
        $('#alert_msg').html(errorThrown);
        $('#alert_msg').fadeIn( "slow");

      }
});

});

When I look at what happens in the console, only home_stocktake_locations_list_group.php file gets called, the 2nd ajax is completely ignored. What is causing this?

In the console I can only see the following

request

Bernz
2#
Bernz Reply to 2017-12-07 19:39:45Z

AJAX requests are done asynchronously, so you could start them one after the other directly (i.e. no comma before you second $.ajax command).

If your AJAX requests depend on each other and must be done in a specific ordre, start the second request in the "success" portion of the first request.

Rodrigo
3#
Rodrigo Reply to 2017-12-07 19:55:16Z

After the first $.ajax you have a , (comma), replace by a ; (semicolon). Othen than that, it worked fine for me.

Also, if you are sending data on the request, consider using $.post instead of the lower level $.ajax. Also, you have the same error routine, so isolate it:

function handleError(xhr, status, error) {
  $('#alert_msg').html(error);
  $('#alert_msg').fadeIn('slow');
}

$.post(_formurl, _formdata)
  .done(function(data) {
    $('#current').html(data);
    var rowCount = $('#locations').length;          
    row_count = parseInt(rowCount);
  })
  .fail(handleError);

$.post(_formurl2, _formdata)
  .done(function(data) {
    $('#previous').html(data);
    var rowCount = $('#dd_home_stocktake').length;          
    row_count = parseInt(rowCount);
  })
  .fail(handleError);
Marius
4#
Marius Reply to 2017-12-07 20:49:47Z

Rodrigo has it right. Lose the , after the first $.ajax and replace with a ;

ie

}),
$.ajax({

becomes

});
$.ajax({ 
AJ.
5#
AJ. Reply to 2017-12-07 20:05:13Z

make each request in separate promises and when all promises have been resolved on then function fire the event to change the DOM.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.303773 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO