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.

The jQuery handlers should work. Could you maybe make a jsFiddle (fork it from http://jsfiddle.net/donejs/qYdwR/) that shows it not working? — Daff, Sep 14 '13 at 22:02
My jsFiddle is on http://jsfiddle.net/WfMqn/1/ :) As you can see, the Complete event fires while the Start event doesn't. — Leo Bernard, Sep 14 '13 at 22:32

score 2 · Accepted Answer · answered Sep 15 '13 at 00:06

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).

Global AJAX event listeners in Can.JS?

1 Answers1