when and then are not working as expected

Question

Calling AJAX function and wait for AJAX function to be done.

$.when(updateApplication("about_you"))
    .then(function() {
        console.log("when is working perfectly :          ");
    });


function updateApplication(){
    //some code here

    // ajax call update the application and get response back like if applications is updated successfully or not with true/false status.

    return $.ajax({
            type: 'POST',
            url: base_url,
            data: {json: data},
            dataType: 'json'
        }).done( function( data ) {
            return data;
        }).fail({
            return data;    
        });
}

$.when calls AJAX function, AJAX function does its work perfectly but the code inside $.when does not execute. (console.log never prints)

Tried $.when with done

    $.when(updateApplication("about_you")).then(function(){
        console.log("when is working perfectly :          ");
    }).done(function(data){
        console.log("see if it works  :          ");
    });

Still no console.log works, in other words $.when body never execute

another try with when call

    $.when(updateApplication("about_you")).done(function(data){
        console.log("see if it works  :          ");
    });

Still console.log does not print. Any idea what is wrong with calling. What need to fix to able to execute the body of $.when once ajax call finish.

Tip: updateApplication does not wait for the AJAX call to be complete. If the idea is to do something after the AJAX call, may I recommend passing in a callback function, and using the success property of jQuery's ajax method. — random_user_name, Mar 09 '18 at 00:24
[From the docs](https://api.jquery.com/jquery.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._ (your `updateApplication` _does not_ return a deferred or promise) — random_user_name, Mar 09 '18 at 00:26
Lastly - your code (with `done`) absolutely console logs _both_ console.logs.... https://jsfiddle.net/cale_b/r6p19g9e/ — random_user_name, Mar 09 '18 at 00:29

Syntactic Fructose · Accepted Answer · 2018-03-09T00:35:51.100

2

You're already handling the ajax inside updateApplication, you need to remove your usage of done to use when correctly:

function updateApplication(){
  //some code here

  // ajax call update the application and get response back like if applications is updated successfully or not with true/false status.

  return $.ajax({
        type: 'POST',
        url: base_url,
        data: {json: data},
        dataType: 'json'
    });
}

If you still aren't getting any sort of response, you may need to check for failure first before chaining a .then:

$.when(updateApplication("about_you"))
    .fail(function(){ alert('Failed!'); })
    .then(function(){ alert('Success!'); });

Also note that then here might be replaceable with done if you plan on ending the promise chain here. then() is an alias for pipe() and returns a new promise, where as done simply returns a success object that cannot be chained

More info here: jQuery deferreds and promises - .then() vs .done()

edited Mar 09 '18 at 00:35

answered Mar 09 '18 at 00:18

Syntactic Fructose

18,936
23
91
177

I tried it $.when(updateApplication("about_you")).then(function(){ console.log("when is working perfectly : "); }); – learner Mar 09 '18 at 00:19
but still no console output – learner Mar 09 '18 at 00:20
And you had already removed the `.done` and `.fail` inside `updateApplication`? – Syntactic Fructose Mar 09 '18 at 00:22
Tip: `updateApplication` _does not wait_ for the AJAX call to be complete. If the idea is to do something after the AJAX call, may I recommend passing in a callback function, and using the `success` property of jQuery's `ajax` method. – random_user_name Mar 09 '18 at 00:24
@SyntacticFructose yes i did remove .fail, .done in updateApplication function . – learner Mar 09 '18 at 00:27
1

BTW, fructose _is better_ than sugar... ;) – random_user_name Mar 09 '18 at 00:29
need response of ajax call in other function and then decide the next step on base of result , I will get from ajax call. @cale_b – learner Mar 09 '18 at 00:30
Your ajax call might be failing then, which prevents your `then` from being reached. I'll update my answer with some information – Syntactic Fructose Mar 09 '18 at 00:31
@SyntacticFructose ajax call update database and I can see the database is updated with each ajax call, and when I had .fail, .done function in ajax call , I could see the result of ajax call which was always successful. – learner Mar 09 '18 at 00:35
1

@SyntacticFructose thanks, problem is solved, the problem was with response sending back from server as it should be in json because json datatype was being used in ajax when call made. – learner Mar 09 '18 at 00:44

when and then are not working as expected

1 Answers1