Sync and corrections by n17t01

Question

How can I join these two ajax into one?

I’m making a shopping cart that when you click on the add button in the cart, appears in the div class=account_cart the number of items added and in the div class=resultado_empresa_selected id a confirmation.

The problem is that when I add the items, the div class=contar_carrinho 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 but it didn’t 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" );
   }
}); 
});

Answer 1

You can call the second Ajax in 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 at the event complete of Ajax

Note on complete: This event is called regardless of whether the request was successful or not. You will always receive a full call return, even for synchronous requests. Source: https://api.jquery.com/Ajax_Events/

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