0

I get Flickr gallery via API/Json. My issue with my code is that the gallery that I fetch has ~ 30 picture, but this snippet:

$.each(data.album.content,function (index,content)
        {
            album_container.append(column);
         [...]
}

Appends only one <div> to the container, and not 30, but appends in right way 30 a/img to this unique column. I cannot figure why and how solve it.

Thank you for your help!

var album_container = $('div#album');

function callGetAjax(url)
{
    return $.get(url,{});
}    

function getAlbum(feed_url)
{
    callGetAjax(absolute_path+'/feed/'+feed_url)
    .success(function(data)
    {
    })
    .error(function(xhr, statusText)
    {//console.log(statusText);
    })
    .done(function(data)
    {
        var loaded = 0;
        album_title = data.album.album_title;
        $('h1#gallery-title').html(album_title);
        var column  = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>');
        $.each(data.album.content,function (index,content)
        {
            album_container.append(column);
            $('<a/>')
                .append($('<img class="img-responsive">').prop('src', content.photo))
                .prop('href', content.target)
                .prop('title', content.title)
                .attr('data-gallery', '')
                .appendTo(column)
                .colorbox({rel:'gallery', speed:0, maxWidth:'95%', maxHeight:'95%'});
        });


    }); 
}

Current HTML result:

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
 <a href=".."><img src="..." /></a>
 <a href=".."><img src="..." /></a>
 <a href=".."><img src="..." /></a>
 [...]
</div>

HTML that I need:

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
     <a href=".."><img src="..." /></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
     <a href=".."><img src="..." /></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
     <a href=".."><img src="..." /></a>
</div>

[...]
2
  • Are the 30 images supposed to go into the column? Commented May 17, 2015 at 8:58
  • Edited question with current and espected HTML. Thank you ;) Commented May 17, 2015 at 9:00

1 Answer 1

1

Remember that .append() will move the HTML node around the DOM tree when the node already exists in your document. In your case, you have declared:

var column  = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>')

outside of your $.each() loop, therefore causing it to be repeatedly moved around inside album_container, instead of being cloned as you have expected. Therefore, what you would do is to declare it within your loop, such that the instance is not outside the scope of your loop:

var album_container = $('div#album');

function callGetAjax(url)
{
    return $.get(url,{});
}    

function getAlbum(feed_url)
{
    callGetAjax(absolute_path+'/feed/'+feed_url)
    .success(function(data)
    {
    })
    .error(function(xhr, statusText)
    {//console.log(statusText);
    })
    .done(function(data)
    {
        var loaded = 0;
        album_title = data.album.album_title;
        $('h1#gallery-title').html(album_title);

        $.each(data.album.content,function (index,content)
        {
            // Creates a new column for every image element
            var column  = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>'),
                item = $('<a/>')
                    .append($('<img class="img-responsive">').attr('src', content.photo))
                    .attr('href', content.target)
                    .attr('title', content.title)
                    .attr('data-gallery', '')
                    .appendTo(column)
                    .colorbox({rel:'gallery', speed:0, maxWidth:'95%', maxHeight:'95%'});

            // Append column instance to the album container
            album_container.append(column);

        });


    }); 
}

If you're also looking for a review of your code, may I suggest you transition away from the jqXHR.success() and jqXHR.error() methods? They have been deprecated in favour of the jqXHR.done() and jqXHR.fail() methods. Using promises, we have a backbone that looks like this:

var album_container = $('div#album');

function callGetAjax(url)
{
    return $.get(url,{});
}    

function getAlbum(feed_url)
{
    // Store returned promise from $.get() in a variable
    var ajaxCall = callGetAjax(absolute_path+'/feed/'+feed_url);

    // Now we listen to the promise
    ajaxCall
    .done(function(data) {

        var loaded = 0;
        album_title = data.album.album_title;
        $('h1#gallery-title').html(album_title);

        $.each(data.album.content,function (index,content)
        {

            var column  = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>'),
                item = $('<a/>')
                    .append($('<img class="img-responsive">').attr('src', content.photo))
                    .attr({
                        'href': content.target,
                        'title': content.title,
                        'data-gallery': ''
                    })
                    .appendTo(column)
                    .colorbox({rel:'gallery', speed:0, maxWidth:'95%', maxHeight:'95%'});

            album_container.append(column);

        });


    })
     .fail(function(xhr, statusText) {
        // Log error
        // console.log(statusText);
    }); 
}
Sign up to request clarification or add additional context in comments.

1 Comment

You're welcome! Also I realized that you're listening to both .success() and .done() in your code, which is redundant. Just updated my answer to reflect the use of better AJAX practices, such as listening to the promise and using .done() and .fail() instead of the old, deprecated .success() and .error(). Also, for non-boolean attributes, use .attr() instead of .prop() ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.