jQuery .then() and success block do not work together?

Question

I am running jQuery version 1.10.X( Yes! I am a little slow! ) and facing this weird issue where doneFilter and failFilter passed inside .then() do not work if I have a success block in the ajax call.

This, however, seems to me like an issue with my own codebase. Proof(..or maybe not..)? I tried a simple example. Things work in the example and as I would expect, the success and doneFilter have been queued and executed.

Now in my codebase, which is absolutely similar as the example above, the .then() part does not execute if I have a success block which is strange. Removing the success block enables .then() and the doneFilter / failFilter gets executed.

Strangely, In my same codebase, they both play nice if I have jQuery - 1.7.X. Could it be an issue because of the changes the ajax framework has gone through in 1.8 and above?

If not, any hints about how to figure out what the issue is? I have checked the methods used as doneFilter and failFilter. No syntax errors. They are merely anon. functions containing console statements.

CODE :

function getMonster (){
    var theMonster = $.ajax({
      url : "http://codepen.io/chriscoyier/pen/difoC.html",
      success : function(data){
        console.log("Monster Succeeded inside 'success' block");
      }
    });    
    return theMonster;
}

var theMonster = getMonster();
theMonster.then (function(){
    console.log("Moster Succeeded outside");
}, function(){
    console.log("Monster Failed  :(");
});

EDIT :

I am doing an ajaxSetup as follows.

$.ajaxSetup({
    beforeSend: function(jqXHR) {
        if ($.cookie("mycookie") == null) {
            console.info("Expired Session");
            AppModule.timeout();
            return false;
        }
    }
});

EDIT 2 : Has anyone ever faced an issue like this before or am I the only one seeing the monster fail? There's not a single exception thrown which is making it even harder to find out what is wrong.

Works there with any mentionned version: http://jsfiddle.net/wfc5bqsx/ — A. Wolff, Oct 14 '14 at 13:04
Not sure how large your codebase is, but have you tried to hunt down the problem by omitting other modules so that you get to a minimal example? — Bergi, Oct 14 '14 at 13:05
I am doing an `ajaxSetup` but I don't think there is something faulty. - ` $.ajaxSetup({ beforeSend: function(jqXHR) { if ($.cookie("mycookie") == null) { console.info("Session has expired. Calling timeout .. "); App.timeout(); return false; } } });` — Praveen Puglia, Oct 14 '14 at 13:09
And, I have tried to execute it in isolation with no luck! :( — Praveen Puglia, Oct 14 '14 at 13:12
@A.Wolff It does. That's what I have been expecting and doing. But Somehow in my codebase it does not with the same code. Any way I can hook into jQuery core to figure out whether the handler queue is being reset or `.then()` block is ignored somehow? — Praveen Puglia, Oct 14 '14 at 13:15
Per [this answer](http://stackoverflow.com/questions/10507079/stop-ajax-on-beforesend), you should be calling `jqXHR.abort()` in your `beforeSend` handler if you want to cancel things. — jfriend00, Oct 14 '14 at 19:01

score 0 · Answer 1 · answered Oct 14 '14 at 13:51

Can you try to use done/fail, just to be sure it's working :

function getMonster () {
    var theMonster = $.ajax({
      url : "http://codepen.io/chriscoyier/pen/difoC.html",
      success : function(data){
        console.log("Monster Succeeded inside 'success' block");
      }
    });    
    return theMonster;
}

var theMonster = getMonster();
theMonster.done(function(){
    console.log("Moster Succeeded outside");
})
.fail(function(){
    console.log("Monster Failed  :(");
});

And add "true" :

$.ajaxSetup({
    beforeSend: function(jqXHR) {
        if ($.cookie("mycookie") == null) {
            console.info("Expired Session");
            AppModule.timeout();
            return (false);
        }
        return (true);
    }
});

Can you check if the XmlHttpRequest has been sent ? – queval_j Oct 15 '14 at 07:14 — queval_j, Oct 15 '14 at 07:14

score 0 · Accepted Answer · answered Dec 11 '14 at 13:07

As I figured out after spending quite a time on debugging, there was a logical access issue in the success block of the ajax call. I was trying to access a key of an object which returned null and try to use a method on that, within a loop.

I am not sure if jQuery should have stopped executing there because it allows chaining. The reason why I could not find a solution then is that the browser console didnt show me any error but just stopped the execution after the loop went ahead with that specific iteration.

The question I am asking in my head is shouldn't jQuery had gone ahead with the execution of .then() callbacks even if the success block failed at some point? May be, may be not.

jQuery .then() and success block do not work together?

2 Answers2