.ajaxStop callback function being executed multiple times

Question

I'm using jQuery but my problem is that my page variable is being incremented several times even when I'm using "page += 1" in the .ajaxStop callback function because it's being executed more than once after the first time it's used. I use that variable as a parameter passed to the Flickr API to get a specific page of data.

What is happening is that the first time that function is called, the callback function is executed once. I then call the same function from a "more" button to get the next set of results but that time the function is called twice, the next time it's called thrice, and so on... That means that I can get page 1, 2, 4, 7, 11, etc...

The AJAX functions I'm calling are basically the .getJSON function and some extra .getJSON functions called in its callback method [inside getPhotos(id)]

// This gets the user ID from a given Flickr user page URL and does some presentation stuff
function getUserID() {
    $("#moreRow").hide(350);

    var usr = document.getElementById('user').value
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json
    $.getJSON(Req_addr, function(data) {
        // Once the user is known, data about its photos is requested    
        getPhotos(data.user.id)
    });

    // This hides the user data panel    
    $("#userInfo").hide(0);

    // This hides the settings panel    
    $("#settings").hide(0, function() {
        $("#loader").slideDown(750);
    });    

    // This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop)
    $("#photos").ajaxStop(function() {
        // the page counter is incremented for the next page to be requested next time
        page += 1

        // Add the data for the newly obtained photos to the table
        addPhotosToTable()
    });
}

Any hint as to what I'm doing wrong?

You can see the whole source here: http://luisargote.com/flickr/javascript/argote_flickr.js

Lustre

And you can try to use the webapp here: luisargote.com/flickr.php it works well but skips some pages due to the problem described – Lustre

My WebApp has been fixed, thanks for the help! – Lustre

Answer 1

What you're seeing is because .ajaxStop() attaches a new event handler, and you're attaching a new one each time. Just move it outside (but still inside a document.ready handler), like this:

// This gets the user ID from a given Flickr user page URL and does some presentation stuff
function getUserID() {
    $("#moreRow").hide(350);

    var usr = document.getElementById('user').value
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json
    $.getJSON(Req_addr, function(data) {
        // Once the user is known, data about its photos is requested    
        getPhotos(data.user.id)
    });

    // This hides the user data panel    
    $("#userInfo").hide(0);

    // This hides the settings panel    
    $("#settings").hide(0, function() {
        $("#loader").slideDown(750);
    });   
} 

// This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop)
$("#photos").ajaxStop(function() {
    // the page counter is incremented for the next page to be requested next time
    page += 1

    // Add the data for the newly obtained photos to the table
    addPhotosToTable()
});

---

The alternative is (if for some reason #photos gets blown away), leave it where it is inside the function and use .one() like this:

$("#photos").one("ajaxStop", function() {

This will run the handler once, then unbind it, giving the effect you want...but unless the element is getting destroyed somewhere (it doesn't sound like it is) stick with binding it once outside, no reason to do extra work.

Want

Thank you very much, so when I call ajaxStop it basically creates a permanent sort of listener for when called AJAX events finish? And this listener would work within the scope of #photos only? – Lustre

@Lustre - yup, unless that element gets destroyed those event handlers stay around, and add up. No on the scope part, ajaxStop is a global event, it fires for all elements every time it fires. – Want

Thank you very much, I'll make sure to mark your answer as useful when I get enough reputation to do so. – Lustre

Answer 2

You're re-binding the ajaxStop each time you request more details.

Simply move the event binding outside getUserId, and do it once on page load.

function getUserID() {
    $("#moreRow").hide(350);

    var usr = document.getElementById('user').value
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json
    $.getJSON(Req_addr, function(data) {
        // Once the user is known, data about its photos is requested    
        getPhotos(data.user.id)
    });

    // This hides the user data panel    
    $("#userInfo").hide(0);

    // This hides the settings panel    
    $("#settings").hide(0, function() {
        $("#loader").slideDown(750);
    });    
}

jQuery(document).ready(function ($) {
    // This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop)
    $("#photos").ajaxStop(function() {
        // the page counter is incremented for the next page to be requested next time
        page += 1

        // Add the data for the newly obtained photos to the table
        addPhotosToTable()
    });
});

Academicism

Thank you very much Matt, do you recommend that I use jQuery(document).ready(function ($) { instead of a function being called with window.onload, if so, why? – Lustre

@Argote: Using jQuery(document).ready() lets you bind multiple handlers, whereas window.onload allows only one (unless you be clever about it). – Academicism

Answer 3

Check the length of $("#photos").length, your page will be incremented for each item in that list

Acceptor

That is an interesting proposal, though I'd like to know why it's being called more than once. – Lustre