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

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.