Javascript callback functions with ajax

Question

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

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

My current function:

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 as other jQuery functions, i.e.

var parentENumber = E1-3;

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

Answer 1

getNewENumber , .

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

Answer 2

@patrick dw anwser . console.log ( ), , , ( ) :

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

, , , returnValue :

var parentENumber = E1-3;

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

Answer 3

This would be better done using jQuery Pending Objects . Ask your AJAX call to return the object jqXHR.

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

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

If you want to save the error callback inside this function, you can register there instead:

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

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