Loading JSON content via Ajax

Loading JSON content via Ajax

http://icant.co.uk/articles/things-to-know-about-ajax/load-json.html

Example

• See “Axolotl” photos on flickr
• See “Capybara” photos on flickr

Source Code

JavaScript

$(document).ready(function(){
  var container = $('#target');
  container.attr('tabIndex','-1');
  $('.ajaxtrigger').click(function(){
    var trigger = $(this);
    var url = trigger.attr('href');
    container.html('');
    if(!trigger.hasClass('loaded')){
      trigger.append('<span></span>');
      trigger.addClass('loaded');
      var msg = trigger.find('span::last');
    } else {
      var msg = trigger.find('span::last');
    }
    doAjax(url,msg,container);
    return false;
  });
  
  function doAjax(url,msg,container){
    var tag = url.split('/');
    var tag = tag[tag.length-1];
    $.getJSON("http://api.flickr.com/services/feeds/"+
               "photos_public.gne?tags="+tag+
               "&tagmode=any&format=json&jsoncallback=?",
     function(data){
       msg.html(' (ready.)');
       $.each(data.items, function(i,item){
         $("<img/>").
          attr("src", item.media.m).
            attr("alt",item.title).
              appendTo(container);
         if ( i == 3 ) return false;
       });
       container.focus().effect("highlight",{},1000);
    });
  }
});