Jquery Ajax Success Callback Function Definition

jQuery ajax success callback function definition

Just use:

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

The success property requires only a reference to a function, and passes the data as parameter to this function.

You can access your handleData function like this because of the way handleData is declared. JavaScript will parse your code for function declarations before running it, so you'll be able to use the function in code that's before the actual declaration. This is known as hoisting.

This doesn't count for functions declared like this, though:

var myfunction = function(){}

Those are only available when the interpreter passed them.

See this question for more information about the 2 ways of declaring functions

Passing a callback function to jQuery AJAX success function

showGradesBox is a string in your code. So you have two options to execute the callback function:

If you want to keep the string you can use

this[callback](response);

(if callback is defined in global scope you can also use window[callback](response);

Or you can pass the function directly:

var callback = showGradesBox;

(in this case you can keep your existing code for callback execution)

How to pass $(this) in success callback of $.ajax

$(this) is relative to the inner-most function, and in this case you'll need to assign $(this) to a variable before the ajax query, and use that variable in the success instead.

$("#tb1").focusout(function(){
    var elem = $(this);
    $.ajax({
        type:'POST',
        url: 'validURL',
        data: {various_parameters},
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data){
            validInput(data, elem);
        },
        error: error
    });
}

Pass variable to function in jquery AJAX success callback

Since the settings object is tied to that ajax call, you can simply add in the indexer as a custom property, which you can then access using this in the success callback:

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                indexValue: i,
                success: function(data) {
                    image_link(data , this.indexValue);

                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){ 
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };  
    }, 1000);       
};

Edit: Adding in an updated JSFiddle example, as they seem to have changed how their ECHO endpoints work: https://jsfiddle.net/djujx97n/26/.

To understand how this works see the "context" field on the ajaxSettings object: http://api.jquery.com/jquery.ajax/, specifically this note:

"The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not
specified, this is a reference to the Ajax settings themselves."

wait for a jquery ajax callback from calling function

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

Calling functions outside of jQuery ajax success callback?

If you need to execute some logic before to call the function do_the_other_thing then pass it as callback from the main call.

var obj = {
    mylib: {
        do_the_ajax: function(data, cb){
            $.ajax({
                    url: "the_internet",
                    method: "DELETE",
                    data: JSON.stringify(data),
                    success: function() {
                        // Execute previous logic.
                        cb(); // This will call 'do_the_other_thing()'
                    },  
                    error: function() {
                        console.log("YOU FAIL!");
                    }   
            }); 
        },  
        do_the_other_thing: function() {
            console.log("WHAT THE FOX SAY");
        }
    }   
}
                                      +----- Pass the function 'do_the_other_thing()'
                                      |
                                      v
obj.mylib.do_the_ajax(data, obj.mylib.do_the_other_thing);

Pass success callback function with arguments to another function that performs AJAX call

When you want to call:

function sendAjaxRequest(url, data, errorCallback, successCallback)

You just need to give names of functions for errorCallback and successCallback. You are passing function references, so they can be called by other code. The params are provided at the point where those functions are called, like in your original example:

success: function(response) {
        this.handleSuccessCallback(response);
    }

Here the success function as defined in ajax with first parameter as response, so you have an anonymous function here with the first parameter as response.

So you just need to define your functions to match what they will be when they get called by ajax, e.g.:

var firstSuccessCallback = function(response) {
    //do something;
}

var firstErrorCallback = function(error) {
    //do something;
}

you can do:

sendAjaxRequest(url, data, firstErrorCallback, firstSuccessCallback)

jQuery.ajax success callback function not executed

For many times I have encountered similar problems and most of the time the reason was a malformed json. Try getting the result as text data type to see whether this is your problem.

Also, I'd like to ask if you're using a parameter like "&jsoncallback=?" in your url, since your data type is jsonp instead of simple json.

jQuery $.ajax success must be a callback function?

Well, you are inside a function - take advantage of variable scope ;-)

function doPost(dType, postData, uri) { 
    var result;
    $.ajax({ 
        url: SITE_URL + uri, 
        dataType: dType, 
        data: postData, 
        async: false,
        success: function(data){ 
          result = data;
        }); 
    return result;
} 

This actually works, but I guess the async part is obligatory then... Otherwise the call of $.ajax would return immediately, and result would still be undefined - you would always get undefined as result of your function call.

However, when you make the $.ajax call synchronous, it blocks until the data is received, and you can return the data as result of your own function.

But you have to be clear that when using this method, no other code will be executed until the ajax load finishes!

---

Related Topics