CODEWITHSUNDEEP
javascriptjqueryajaxcallback
Zak Henry
Zak Henry

Reputation: 2185

Javascript callback functions with ajax

I am writing a generic function that will be reused in multiple places in my script.

The function uses ajax (using jQuery library) so I want to somehow pass in a function (or lines of code) into this function to execute when ajax is complete. I believe this needs to be a callback function, but after reading through a few callback answers I'm still a bit confused about how I would implement in my case.

My current function is:

function getNewENumber(parentENumber){

        $.ajax({
               type: "POST",
               url: "get_new_e_number.php",
               data: {project_number: projectNumber, parent_number: parentENumber},
               success: function(returnValue){
                    console.log(returnValue);
                    return returnValue; //with return value excecute code

                },
                error: function(request,error) {
                    alert('An error occurred attempting to get new e-number');
                    // console.log(request, error);
                }
        });
    }

With this function I want to be able to do something in the same way other jQuery functions work ie;

var parentENumber = E1-3;

getNewENumber(parentENumber, function(){
    alert(//the number that is returned by getNewENumber);
});

Upvotes: 8

Views: 43530

Answers (3)

Alnitak
Alnitak

Reputation: 339816

This would be better done with jQuery's Deferred Objects. Have your AJAX call return the jqXHR object.

function getNewENumber(parentENumber) {
    return $.ajax( { ... } );
}

getNewENumber(E1 - 3).then(success_callback, error_callback);

If you want to keep the error callback within that function you can register that there instead:

function getNewENumber(parentENumber) {
    var jqXHR = $.ajax( { ... } );
    jqXHR.fail( ... );
    return jqXHR;
}

getNewENumber(E1 - 3).done(success_callback);

Upvotes: 0

Mariano Desanze
Mariano Desanze

Reputation: 8163

@patrick dw's anwser is correct. But if you want to keep calling the console.log (or any other actions) always, no matter what the caller code function does, then you can add the callback (your new parameter) inside the success function you already have:

function getNewENumber(parentENumber, cb_func /* <--new param is here*/){ 

    $.ajax({
           type: "POST",
           url: "get_new_e_number.php",
           data: {project_number: projectNumber, parent_number: parentENumber},
           success: function(returnValue){
                console.log(returnValue);
                cb_func(returnValue); // cb_func is called when returnValue is ready.
            },
            error: function(request,error) {
                alert('An error occurred attempting to get new e-number');
                // console.log(request, error);
            }
    });
}

And the calling code remains the same as yours except that the function will receive the returnValue by parameter:

var parentENumber = E1-3;

getNewENumber(parentENumber, function(val /* <--new param is here*/){
    alert(val);
});

Upvotes: 3

user113716
user113716

Reputation: 322492

Just give getNewENumber another parameter for the function, then use that as the callback.

   // receive a function -----------------v
function getNewENumber( parentENumber, cb_func ){

    $.ajax({
           type: "POST",
           url: "get_new_e_number.php",
           data: {project_number: projectNumber, parent_number: parentENumber},

             // ------v-------use it as the callback function
           success: cb_func,
            error: function(request,error) {
                alert('An error occurred attempting to get new e-number');
                // console.log(request, error);
            }
    });
}

var parentENumber = E1-3;

getNewENumber(parentENumber, function( returnValue ){
    alert( returnValue );
});

Upvotes: 10

Related Questions