Question

I am so confused as to why i am getting duplicate images coming through as a result.

here is the code i have on jsfiddle:

http://jsfiddle.net/NyLch/3/

i was thinking maybe it is an async problem, receiving the new pagination before it searches however, what can i do to change that???

thank you

Aiden

Answer 1

The problem is that the second $.ajax() call is made before the first one ended.

What you need to do is set a function like this:

var n = 0, pages = 2;
function displayImgs(url) {
    $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: url,
            success: function(data) 
            {
                 alert(data.pagination.next_url);
                 for(var i=0;i<data.data.length; i++)
                 {
                     $("#gallery").append('<img src="'+data.data[i].images.low_resolution.url+'" height="50" width="50">');
                 }
                n++
                if(n<pages) displayImgs(data.pagination.next_url);
            }
    });
}

where n is used only to check the number of times you call the function and pages is the number of pages you want to “load/show”.

Then you just have to call this function once with the url you have like this:

displayImgs(url);

and you should get what you want.

Here is a DEMO.