Clever Geek Handbook

External method from AJAX callback in JavaScript and jQuery

I have a function in JS and jQuery that triggers an AJAX call and has a block callback

to tell me 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 this, but using external functions like showAjaxLoader()

just doesn't work! he says this function is undefined:

function registerUser(data) {

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

        // SOME CODE THAT RUNS WHEN IT 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?

Thank:)

+3


source to share


3 answers


Developed a sample. it might be good practice. Try the following:



    $(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);
    }
+1


source


Have you tried doing something like:



var that = this;

function registerUser(data) {

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

        // SOME CODE THAT RUNS WHEN IT COMPLETE

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

    });
});
+1


source


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); It might work.

0


source






More articles:


All Articles