jquery ajaxComplete() without dom object

Question

I'm using ajax (via jquery) for exchanging data with a database. As the .ajaxcomplete function is always based on a jquery object with selector, is there any other way to check whether this explicit ajax request was sucessfull? The .ajax does not belong to any specific dom object like div etc. I want to use Ajax in a pure Javascript file. In this moment not associated with the specific html page. $(document).ajaxComplete() works but is not what I want

this.replot=function(){ 
    $(this).ajaxComplete(function() {alert('hallo');});   //here is my prob
    var that=this;
    var anfrage='anfrage= SELECT '+ this.xvaluecol+', '+this.y1valuecol+ ' FROM '+ this.tablename+ ' WHERE '+this.xvaluecol+' <=\'2010-11-06 15:00:00\' AND '+this.xvaluecol+' >=\'2010-11-06 07:00:00\'';
    $.ajax({
        url : 'getdata.php',
        dataType : 'json',
        data: anfrage,
        type : 'post',
        success : function(json) {
            if(String(json[0][0]).search('error')==-1)
            {
                that.data1=json;
                that.xaxismin=json[0][0];
                that.xaxismax=json[json.length-1][0];
                that.yaxsismin=parseInt(that.find_min(json));
                that.yaxismax=parseInt(that.find_max(json));
                console.log(json);
                console.log("yaxismin="+that.yaxismin);
                console.log("yaxismax="+that.yaxismax);
                //c=new Date((that.xaxismin));
                //c.setMinutes(c.getMinutes()+1441+60);
                //(c.toLocaleString());
                that.update();
                $.jqplot(that.divid,[that.data1,that.data2],that.options).replot();
            }
            else
            {
                alert('Plot nicht moeglich Fehlercode: '+json[0][1]);
            }
        }
    })
}

Answer 1

I'm prone to using ajaxStop over ajaxComplete . Not sure about all the differences though, I think it's similar.

The element you bind ajaxComplete to doesn't really matter. The following two snippets of code do exactly the same:

$("#some_element").ajaxComplete(function () {
    alert($(this).html());
});

versus

$(document).ajaxComplete(function () {
    alert($("#some_element").html());
});

So I think your problem can be solved by using $(document) .

Answer 2

When defining your ajax call you can specify a "Complete" callback. This call back gets called after all ajax calls and after success/error callbacks.

$.ajax({
    complete: function(){ alert('hello'); }
});

$.ajax also returns a promise object as of jQuery 1.5. If you are using a later version of jQuery you could also do this:

var jqXhr = $.ajax({ ... your code }).always(function(){ alert('hello'); });
//Or
jqXhr.always(function(){ alert('hello'); });

Answer 3

You can set global event handlers for ajax requests in jQuery. You can add a dynamic property (say 'id') and identify a particular request.

$.ajaxSetup({
    success: function(data, textStatus, jqXHR) {
        console.log(jqXHR.id + " success");
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR.id + " failed");
    },
    complete: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR.id + " completed");
    }
});

$.ajax({
    url: "/"
}).id = "request1";

$.ajax({
    url: "/"
}).id = "request2";

$.ajax({
    url: "sdddqwdqwdqwd.com"
}).id = "request3";

demo : http://jsfiddle.net/diode/3fX8b/