Javascript callback functions with ajax

Question

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

I suppose, this is not possible (or at least, very hard) this way. You should swap functions. — kirilloid
– kirilloid, Commented Feb 14, 2011 at 2:16

user113716 · Accepted Answer · 2011-02-14 02:17:23Z

10

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

answered Feb 14, 2011 at 2:17

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zak Henry Over a year ago

Perfect. I new it would be something simple. It's always easier to learn when it is put in your own context. Thanks

Community · Accepted Answer · 2017-05-23 12:07:52Z

3

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

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 14, 2011 at 2:44

Mariano Desanze

8,2587 gold badges49 silver badges72 bronze badges

1 Comment

Zak Henry Over a year ago

Yea when I was implementing it in my code I did wonder how to do it if I had wanted to have other success actions. Thanks

Alnitak · Accepted Answer · 2011-11-01 12:24:14Z

0

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

answered Nov 1, 2011 at 12:24

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Collectives™ on Stack Overflow

Javascript callback functions with ajax

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related