Question

I’m trying to use the ajaxStop function in jquery but can’t get it to fire, any ideas?

What I’m trying to do is loop through each anchor tag and then update some content inside it, from there I want to use the ajaxstop event to fire a script to reorganize the anchors based on the updates

Thanks for any help

jQuery(document).ready(function($) {
    function updateUsers() {
        $(".twitch_user").each(function(index, user) {
            $.ajax({ url: "https://api.twitch.tv/kraken/streams/" + $(user).attr("id") + "?callback=?", success: function(d) {
                if(d.stream) {
                    $(user).addClass("online");
                    $(user).removeClass("offline");
                    $(user).children(".viewers").text(d.stream.viewers + " viewers");
                } else {
                    $(user).addClass("offline");
                    $(user).removeClass("online");
                    $(user).children(".viewers").text("0 viewers");
                }
                console.log(d);
            }, dataType: "json"});
        });
    }
    //$(document).ajaxStart(function() {
    //  console.log("Event fired!");
    //  updateUsers().delay(2000);
    //})
    $(document).ajaxStop(function() {
        console.log("Event fired!");
        // updateUsers().delay(2000);
    });
    updateUsers();
});

Answer 1

Apparently the global handlers are turned off when doing JSONP requests, as explained in this ticket:

JSONP requests are not guaranteed to complete (because errors are not caught). jQuery 1.5 forces the global option to false in that case so that the internal ajax request counter is guaranteed to get back to zero at one point or another.

I’m not sure if JSONP is your intention or not, but the ?callback=? on the end of the URL makes jQuery handle it as such.

The solution was to set the following:

jQuery.ajaxPrefilter(function( options ) {
    options.global = true;
});