来自JavaScript和jQuery中的AJAX回调的外部方法

Question

I have a function in JS & jQuery that fires an AJAX call and it has a callback block to let me know when it's finished:

function ajaxCall(url, type, dataType, dataToSend, callback) {

    if (dataType == undefined) dataType = "json";
    if (dataToSend == undefined) dataToSend = null;

    $.ajax({
        url: url,
        type: type,
        dataType: dataType,
        contentType: "application/json",
        data: dataToSend,
        async: true,
        success: function (result) {
            callback(result);
        },
        error: function (data, status) {
            console.error("Server Error: " + status);
        }
    });
}

I am accessing it like so, but using external functions like showAjaxLoader() just doesn't work! it says this function is undefined:

function registerUser(data) {

    ajaxCall(pathServiceRegister, "POST", undefined, JSON.stringify(data), function (result) {

        // SOME CODE THAT RUNS WHEN IT'S COMPLETE

        // External method:
        showAjaxLoader(false); // Doesn't work

    });
});

function showAjaxLoader(show) {
    var loader = $('.ajax-loader');
    if (show) {
        loader.fadeIn("fast");
    } else {
        loader.fadeOut("fast");
    }
}

What am I doing wrong?

Thanks :)

Answer 1

Have you tried to do something like:

var that = this;

function registerUser(data) {

    ajaxCall(pathServiceRegister, "POST", undefined, JSON.stringify(data), function (result) {

        // SOME CODE THAT RUNS WHEN IT'S COMPLETE

        // External method:
        that.showAjaxLoader(false); 

    });
});

Answer 2

Worked out some sample. this may be good practice. Try this :

    $(document).ready(function() {
        $("button").click(function() {registerUser();});
    });

    var Scallback = function(arg) {
        alert("Success :"+arg);
        showAjaxLoader(true);
    }
    var Ecallback = function(arg) {
        alert("Err :"+arg);
        showAjaxLoader(true);
    }

    function showAjaxLoader(show) {
        var loader = $('.ajax-loader');
        if (show) {
            loader.fadeIn("fast");
        } else {
            loader.fadeOut("fast");
        }
    }

    function ajaxCall(url, type, Scallback, Ecallback) {
        $.ajax({
            url : url,
            type : type,
            async : true,
            success : function(result) {
                Scallback(result);
            },
            error : function(data) {
                Ecallback(data)
            }
        });
    }

    function registerUser() 
    {
        ajaxCall(pathServiceRegister, "GET", Scallback, Ecallback);
    }

Answer 3

Declare your method like this

var obj = {
showAjaxLoader : function(show) {
    var loader = $('.ajax-loader');
    if (show) {
        loader.fadeIn("fast");
    } else {
        loader.fadeOut("fast");
    }
}
}

Then inside ajax, call obj.showAjaxLoader(false); This may work.