CODEWITHSUNDEEP
javascriptjqueryajax
CBeTJlu4ok
CBeTJlu4ok

Reputation: 1112

jQuery promise with function

I'm trying to make global ajax handler. so first let me show you the function

    var data = {
       test : 1
    }
    $.when( $.ajax({
        type: 'POST',
        url: ajaxurl,
        data : data,
        dataType: "json",
        success: function(data) {
            console.log('first me')
        }
        })
    ).then(function( data, textStatus, jqXHR ) {
        console.log('then me')
    });

this way it works. and outputs

first me

then me

But I want this ajax to be a function So this is how I'm trying to make it.

    var data = {
       test : 1
    }
    $.when(globalAjax(data)).then(function( data, textStatus, jqXHR ) {
        console.log('then me')
    });

    function globalAjax(data) {
           $.ajax({
        type: 'POST',
        url: ajaxurl,
        data : data,
        dataType: "json",
        success: function(data) {
            console.log('first me')
        }
        })

    }

this way console outputs then me and then first me.

How to ask to wait ajax inside a function?

Upvotes: 0

Views: 98

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to return the ajax promise from globalAjax so that it can be passed to $.when

function globalAjax(data) {
    return $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: data,
        dataType: "json",
        success: function (data) {
            console.log('first me')
        }
    })
}

Demo: Problem, Solution

$.when()

If a single argument is passed to jQuery.when and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately.

In your case since there is no return from the method, it will pass undefined to $.when which is causing the behavior

since a promise is returned there is no need to use $.when()

globalAjax(data).then(function (data, textStatus, jqXHR) {
    console.log('then me')
});

Demo: Fiddle

Upvotes: 2

Oscar Paz
Oscar Paz

Reputation: 18292

You need to return a promise in globalAjax:

function globalAjax(data) {
    return $.ajax({
        type: 'POST',
        url: ajaxurl,
        data : data,
        dataType: "json",
        success: function(data) {
            console.log('first me')
        }
    });
}

And you don't need to use the $.when function:

globalAjax(data).then(function(data, ...) { ... });

$.when is, mainly, to wait for the completion of two or more deferreds or promises.

Upvotes: 4

mpm
mpm

Reputation: 20155

 function globalAjax(data) {
     return $.ajax({
        type: 'POST',
        url: ajaxurl,
        data : data,
        dataType: "json",
        success: function(data) {
            console.log('first me')
           }
        });
    }

you need to return a promise from your function.

$.ajax({
        type: 'POST',
        url: ajaxurl,
        data : data,
        dataType: "json",
        success: function(data) {
            console.log('first me')
        }
        }).then(function( data, textStatus, jqXHR ) {
        console.log('then me')
        });

You dont need when $.ajax already returns a promise.

Upvotes: 3

Related Questions