Wait return user ajax before process

[kouros91]

Hi.
I have a few ajax request in a js code in article (with sourcerer) and i would like the second reequest doesn't run before the end of the first. But i don't how to do to wait success of my ajax request. Can you help me ?
The syntax of ajax is similar to exemples in fabrik.
It's a function called with button in html
The problem is copy_idcorrection must be terminated before running the others ajax_erroradhesion in loop.

function button_erradh() {

    function ajax_erroradhesion(xxy) {
    lareponse = '';
    var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=erroradhesion&idadhesion=" + xxy;
    new Request({url:url,onComplete: function(response) {
                do {
   
                } while (response == '');
                if (response != '') {
                    var rep = response.substr(0, 6);
                    if (rep == 'COPYID') {
                            var nid = response.substr(6, response.length-6);
                            alert(response);
                    }
                    else {
                        alert(response);
                    }
                }
    }}).send();
    }

       
    function copy_idcorrection (xxy) {
    var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=copy_idcorrection_in_users_varint&idcorrection=" + xxy;
    new Request({url:url,
    onComplete: function(response6) {
    do {
   
    } while (response6 == '');
    }
    }).send();
    }
   
    var phrase2 = "Adh?sions v?rifi?es ! Merci de patienter jusqu'au rafraichissement de la page !";



    r = confirm("Voulez-vous corriger en m?me temps les fiches s?lectionn?es ?");
    if (r == true) {
        fairecorrection = 1;
    } else {
            fairecorrection = 0;
    }
    copy_idcorrection (fairecorrection);   
    var ids = Fabrik.getBlock('list_64').getCheckedRowIds();
    var r = true;
    var r1 = true;
    var r2 = true;
    var r3=true;
    var fairecorrection = 0;
    varurl = 0;

    switch (ids.length) {
        case 0:
            alert ('Pas de fiches s?lectionn?es !');
            break;
        default:
            r2 = confirm("Voulez-vous vraiment v?rifier les "+ids.length+" fiches s?lectionn?es ?"+ids[0]+'-->'+ids[ids.length-1]);
            if (r2 == true) {             
                var longueur = ids.length-1;
                for (var i = 0;; i++) {
                    if (i > longueur) break;
                    varurl = ids[i];
                    ajax_erroradhesion(varurl);   

                }
                alert(phrase2);
                location.reload();
            }
    }
}

Thank you
Nicolas

 

[cheesegrits]

The whole point of AJAX calls is that they are asyncronous, so you can't sit and wait for one to return. Technically you could set the 'sync' property on the call to false, but that would tie up everything (the entire JS event system), and is being deprecated in most browsers.

That's what callbacks (like the onSuccess function) are for - they get called when the AJAX call returns.

So probably the best way to do that would be to use jQuery's ajax(), and put your code that needs to run after completion of the first call inside a success() callback or use done() chaining. The latter is the recommended way moving forward, as the success() function will be deprecated in future versions of jQuery.

jQuery.ajax({
   url: your first url
}).done(function (response)) {
   // code here that runs when the first call returns
   jQuery.ajax({
      url: you second url
   }).done(function(response)) {
      // code here that runs when the second call returns
   });
});

-- hugh

 

[kouros91]

Thank you Hugh for your explanation