CODEWITHSUNDEEP
jquerygetjson
Jason
Jason

Reputation: 981

replace instead of appendto with getJson

Help will be most appreciated.

This is the code from the Jquery website

    <button id="refresh">refresh</button>
    <div id="images"></div>

    $("#refresh").click(function(){ 
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                {
                    tags: "vw beetle",
                    tagmode: "any",
                    format: "json"
                },    

                function(data) {   
                    $.each(data.items, function(i, item) {
                        $("<img/>").attr("src", item.media.m).empty().appendTo("#images");
                        if (i == 3)
                    return false;

                    });
                });
      });

This is racking my brain, I want to replace the results, not keep adding or appending to the results when the refresh button is clicked.

Thank you

Upvotes: 2

Views: 1505

Answers (2)

adeneo
adeneo

Reputation: 318192

$("#refresh").click(function() {
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: "vw beetle",
        tagmode: "any",
        format: "json"
    },function(data) {
        var fragment = document.createDocumentFragment();
        $.each(data.items, function(i, item) {
            var img = new Image();
                img.src = item.media.m;
            fragment.appendChild(img);
            if (i == 3) return false;
        });
        $('#images').html(fragment);
    });
});​

Append the images to a fragment, and after the loop when you have your three images, use html() to insert the fragment, removing the already exisiting images.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

I think you want to empty #images:

function (data) {
   $("#images").empty();
   $.each(data.items...

Upvotes: 1

Related Questions