Global AJAX event listeners in Can.JS?

Question

Is it possible to bind listeners to when an AJAX request is started in Can.JS? I want to integrate a little loading indicator in my Can.JS project so that users can see when data is being loaded from my server. Using the jQuery $.ajaxStart and $.ajaxSend events didn't work, however the $.ajaxComplete event did fire correctly.

Answer 1

In your example you are binding to the event on document.ready which is after you start the Ajax request. The complete log only shows because the document is ready and binds the event before the Ajax request returns. If you do everything in the correct order on document.ready like this:

$(document).ready(function(e){
    $(document).ajaxStart(function(){
        console.log('start');
    }).ajaxComplete(function(){
        console.log("Complete");
    });

    var TestModel = can.Model({
        findAll: "GET http://jsfiddle.net/echo/json/"
    });

    TestModel.findAll({}, function(result){
        alert(result);
    });
});

It works as expected (see updated fiddle).