Managing ajax calls with jQuery Deferred object

Question

I have to check the availability of internet access in a device at a given point of time. So, I am making an ajax call to the server to load a tiny image. I came across jQuery Deferred and tried to use it.

var spacer = "some url";
var getImage;
var connectionAlive;
function checkOnline(spacer) {
    getImage = $.ajax({url:spacer})
                .done(function() {console.log('Connection alive');connectionAlive = true;})
                .fail(function() {console.log('Connection dead');connectionAlive = false;});
    if(connectionAlive === true) {
        return true;
    }
    return false;
}

Now i have to call this checkOnline function when certain events occur. So, i am calling the function and waiting till the promise is resolved.

$(document).on('click','#explore',function() {
    checkOnline(spacer);
    getImage.done(function() {
            // Do something
            })
 });

This only works the first time and I think it is because the deferred object state stays the same once it is resolved. How should I write my code so that i can actually check the connection every-time the click event fires?

New Code:

Hi, I followed the above code but still the click event is only working correctly the first time.

    var connectionAlive;
var url = "http://example.com";
function checkOnline(url, callback1,callback2) {
    $.ajax({url:url})
        .done(function() {console.log('Connection alive');connectionAlive = true;})
        .done(callback1)
        .fail(function() {console.log('Connection dead');connectionAlive = false;})
        .fail(callback2);

}

$(document).on('click','#explore',function() {
    checkOnline(url, function(){
        console.log('Connection Alive from event');
    },function() {
        console.log('Connection Dead from event');
    });

});

bfavaretto · Accepted Answer · 2012-06-29 02:38:03Z

1

Change checkOnline to return the promise itself:

$(document).on('click','#explore',function() {
     checkOnline('url.com').done(function(){
          // Do something
     });
});

var connectionAlive;
function checkOnline(url) {
    return $.ajax({url : url})
            .done(function() {console.log('Connection alive');connectionAlive = true;})
            .fail(function() {console.log('Connection dead');connectionAlive = false;});
}

Or change it to take a callback:

$(document).on('click','#explore',function() {
     checkOnline('url.com', function(){
          // Do something
     });
});

var connectionAlive;
function checkOnline(url, callback) {
    $.ajax({ url : url})
     .done(function() {console.log('Connection alive');connectionAlive = true;})
     .done(callback)
     .fail(function() {console.log('Connection dead');connectionAlive = false;});
     // Do not try to return connectionAlive from here,
     // it will return the value before the ajax response arrived
}

edited Jun 29, 2012 at 2:38

answered Jun 29, 2012 at 2:25

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

8 Comments

Sparda Over a year ago

Hi, I followed the above code but still the click event is only working correctly the first time.

bfavaretto Over a year ago

Strange. Both versions work for me: jsfiddle.net/jCkmT (fail message logged on every click)

Sparda Over a year ago

For the first time when i click the #explore, i am getting the connection alive msg. Then, when i remove the image from the location and try the click again, it is still giving a Connection Alive status.

Sparda Over a year ago

Im not sure if i'm correct but i'm thinking the fiddle will still deliver a Connection Dead message even if we give it a valid URL. Not sure how to check it though.

bfavaretto Over a year ago

Now I understand it. Removing the image won't kill the connection (shutting down your network would). It will return a 404, which is a success status for jQuery. So your done callback is always executed. About the fiddle: it's by design, it's a security restriction (same origin policy).

|

Collectives™ on Stack Overflow

Managing ajax calls with jQuery Deferred object

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related