wait for a jquery ajax callback from calling function

Question

I have reviewed a lot of answers to this type of question and now I am confused as to the best way. Given the latest jquery, I am wanting to

1. Call an ajax funct

Answer 1

Check out 'derferred' in jquery. The below example uses deferred.done with async turned off, and seems to work for me.!

$.ajax({
    url: "http://www.whatever.com/whatever",
    async: false }).done(function( data ) {
        alert(data); //or whatever
    })

Answer 2

You've got to use a callback function. Try this below:

$(function() {

   // I think doAjax should doAnAjax()
   // here you're passing callback
   // but you're not using it doAnAjax()

    doAnAjax(Url, data, function(myRtn) {
        if (myRtnV == "success") {
            resetForm($('#myForm'));
            resetForm($('form[name=addChlGrp]'));
        } else {
            $('.rtnMsg').html("Opps! Ajax Error");
        }
    });
});

// pass callback as third parameter to doAnAjax()

function doAnAjax(newUrl, data, callBack) {
    $.ajax({
        url: newUrl,
        async: true,
        dataType: 'html',
        beforeSend: function() {
            $('.rtnMsg').html("<img src=_cssStyleImg_-A-loading.gif>");
        },
        type: "GET",
        data: data,
        cache: false,
        success: function(data, textStatus, xhr) {
            $('.rtnMsg').html(data);
            myRtnA = "Success"
            return callBack( myRtnA );  // return callBack() with myRtna
        },
        error: function(xhr, textStatus, errorThrown) {
            $('.rtnMsg').html("opps: " + textStatus + " : " + errorThrown);
            myRtnA = "Error"
            return callBack ( myRtnA ); // return callBack() with myRtna
        }
    });

Answer 3

As previously mentioned, using Callbacks.

function process(url, params, successCallback, errorCallback) {
    $.ajax({
        success : successCallback,
        error : errorCallback,
        data : params,
        url : url,
        type : 'POST',
        dataType : 'json'
    });
}

process(
    'http://www.google.co.uk', 
    { 
        param1 : 'a' 
    }, 
    function(resp) { 
        alert('Success');
    },
    function() {
        alert('Uh oh');
    }
);

You can then pass any function to process and it will be called on success/error.

Answer 4

The answer is you don't, but it is easily achievable. The idea of AJAX is it is asynchronous, hence the A JAX. This means that the function that originally calls your ajax will not wait for it to complete and instead all work to be completed after an ajax call should be in the success or error handlers.

If you need something to be synchronous you can change your flag from async:true to async:false but then it becomes really a SJAX call (not even sure the term exists but, technically it isnt an AJAX call anymore).