External method from an AJAX callback in JavaScript & jQuery

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

Sorry that I was not very clear about my words but surely that will also work if you are wrapping all the function in $(document).ready(xxxxx); — Vishal Kumar Sahu
– Vishal Kumar Sahu, Commented Mar 30, 2017 at 20:03

Prasath · Accepted Answer · 2017-03-30 12:24:08Z

1

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

edited Mar 30, 2017 at 12:24

answered Mar 30, 2017 at 11:51

Prasath

1,2942 gold badges16 silver badges38 bronze badges

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

4 Comments

Erez Hod Over a year ago

Hi. This is not very good for me as it's dedicating my whole block just for the showAjaxLoader() function. I want it to fire after certain events are happening inside my block.

Erez Hod Over a year ago

Inside the callback I need to do these things in this order: show success / error to the user in CSS => remove the AJAX loader from screen => redirect the user to another page after 3 seconds

Prasath Over a year ago

You should not call showAjaxLoader(false); inside that block. Pass callback method from where you are making ajax call.

Prasath Over a year ago

Updated my answer. Worked out some sample. this may be good practice.

Amr Aly · Accepted Answer · 2017-03-30 11:45:36Z

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

    });
});

edited Mar 30, 2017 at 11:45

answered Mar 30, 2017 at 11:42

Amr Aly

3,9152 gold badges18 silver badges36 bronze badges

4 Comments

Lys Over a year ago

I wouldn't use "self" for a name of a variable, since "self" is a keyword in JS :)

Lys Over a year ago

He can also take a look at .bind() , you could use it to bind to the scope in which the function lives. Another trick would be to use an arrow function - () => {} as anonymous function, in an arrow function the parent scope isn't lost

Amr Aly Over a year ago

Yes he can do that but since the fat arrow functions are not supported in most browsers yet it's preferred not use them unless he uses some compiler.

Erez Hod Over a year ago

I did try using 'this' but it still won't work. But you guys are also saying it's not a very good option so... I'm doomed X_X

Prasath · Accepted Answer · 2017-03-30 12:30:42Z

0

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.

answered Mar 30, 2017 at 12:30

Prasath

1,2942 gold badges16 silver badges38 bronze badges

Collectives™ on Stack Overflow

External method from an AJAX callback in JavaScript & jQuery

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related