Synchronization in two ajax

2

How can I merge these two ajax into one?

I'm doing a shopping cart that when I click the button to add in the cart, it appears in the div class = car_discount the number of items added and in the class div = result_company_selected_id a confirmation.

The problem is that when I add the items, the div class = car_count sometimes does not change the value.

//Executa em cada form:
$('.formAjax').on("submit",function() {

    // Pegar o ID do formulário para depois:
    //Captura o elemento que sofreu o evento de "submit"
    const formDetails = $(this);

    var formID=formDetails.data("formid");

    //Remove a palavra quitar_ e deixa somente "debitoX"
 $('#loading').html('<img src="../images/45.gif"> loading...');

    $.ajax({
        type: "POST",
        url: 'add.php',
        data: formDetails.serialize(),

        success: function (data) {
            // Inserting html into the result div
            $('.resultado_empresa_selecionada_'+formID).html(data);         
            $('#loading').html(data);

        },
        error: function(jqXHR, text, error){
            // Displaying if there are any errors
            $('.resultado_empresa_selecionada_'+formID).html(error);
        }
    });
    return false;
});




//Executa em cada form:
$('.formAjax').on("submit",function() {

    // Pegar o ID do formulário para depois:
    //Captura o elemento que sofreu o evento de "submit"
    const formDetails_mnicart = $(this);

    var formID_mnicart=formDetails_mnicart.data("formid");



    $.ajax({
        type: "POST",
        url: 'count_carrinho.php',
        data: formDetails_mnicart.serialize(),

        success: function (data) {
            // Inserting html into the result div
            $('.contar_carrinho').html(data);               
        },
        error: function(jqXHR, text, error){
            // Displaying if there are any errors
            $('.contar_carrinho').html(error);
        }
    });
    return false;
});

I tried it like this but it did not work out yet

//Executa em cada form:
$('.formAjax').on("submit",function() {



    // Pegar o ID do formulário para depois:
    //Captura o elemento que sofreu o evento de "submit"
    const formDetails = $(this);

    var formID=formDetails.data("formid");



    //Remove a palavra quitar_ e deixa somente "debitoX"
 $('.resultado_empresa_selecionada_'+formID).html('<img src="imagens/Rolling-1s-30px.gif">');

var ajax1 =  $.ajax({
        type: "POST",
        url: 'add.php',
        data: formDetails.serialize(),

        success: function (data) {
            // Inserting html into the result div
            $('.resultado_empresa_selecionada_'+formID).html(data); 





        },
        error: function(jqXHR, text, error){
            // Displaying if there are any errors
            $('.resultado_empresa_selecionada_'+formID).html(error);
        }
    });


var ajax2 =  $.ajax({
        type: "POST",
        url: 'count_carrinho.php',
        data: formDetails_mnicart.serialize(),

        success: function (data) {
            // Inserting html into the result div
            $('.contar_carrinho').html(data);               
        },
        error: function(jqXHR, text, error){
            // Displaying if there are any errors
            $('.contar_carrinho').html(error);
        }
    });

$.when( ajax1 , ajax2  ).done(function( a1, a2 ) {
   // a1 and a2 are arguments resolved for the url1 and url2.
   // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
   var data = a1[0] + a2[0]; // a1[0] = "Got", a2[0] = " Success"
   if ( /Got Success/.test( data ) ) {
      alert( "All AJAX calls successfully gave responses" );
   }
}); 
});
    
asked by anonymous 22.08.2018 / 13:48

1 answer

2

You can call the second Ajax on the success of the first Ajax

Example

$.ajax({
        type: "post",
        url: "add.php",
        data: formDetails.serialize(),
        success: function (data) {
           $.ajax({
            type: "POST",
            url: 'count_carrinho.php',
            data: formDetails_mnicart.serialize(),

            success: function (data) {
                // Inserting html into the result div
                $('.contar_carrinho').html(data);               
            },
            error: function(jqXHR, text, error){
                // Displaying if there are any errors
                $('.contar_carrinho').html(error);
            }
        });
        }
    });

A second way is to call the second Ajax in the complete event of the Ajax

  

Note on complete: This event is called whether or not the request succeeded. You will always receive a full callback, even for synchronous requests. Source: link

Example

$.ajax({
     type: "post",
     url: "add.php",
     data: formDetails.serialize(),
     success: function(data) {
         //Faz alguma coisa
     },
     complete: function() {
         $.ajax({
             type: "POST",
             url: 'count_carrinho.php',
             data: formDetails_mnicart.serialize(),

             success: function(data) {
                 // Inserting html into the result div
                 $('.contar_carrinho').html(data);
             },
             error: function(jqXHR, text, error) {
                 // Displaying if there are any errors
                 $('.contar_carrinho').html(error);
             }
         });
     }
 });
    
22.08.2018 / 14:46