Question

I’m using getJSON to get data from the facebook pages api, and it works just fine, using this code:

      $(document).ready(function(){

    $.getJSON('url',function(json){

        $.each(json.data,function(i,fb){

           var output='';

        //here I add to output, as this example line:


            output += '<div"><a href="http://www.facebook.com/profile.php?id='+fb.from.id+'>'+fb.from.name+'</a>';


           $("#results").append(output);

    });
});

However, what I’d like to do is similar to what facebook does in it’s social plug in where it starts off with 5 entries and has a Show More link, which when clicked, brings in 5 more entries.

Is there a way to do this by altering the code I have?

Thanks

Answer 1

Well, sure there is. Do you want to fetch the other results when a user clicks the “more link” to save bandwidth or is it OK to fetch it at the same time? (async vs sync)

This answer considers the bold text:

output += '<div' + (i >= 5 ? ' style="display: none;"' : '') + '><a href="http://www.facebook.com/profile.php?id=' + fb.from.id +'>'+fb.from.name+'</a></div>';

Oh, and check that line in your code, you had a syntax error and an unmatched div. Also you should have quotation marks around your HTML element’s attributes.

For showing the links when the more link is clicked you could do something like:

$('.more').click(function() {
    $(this).hide();
    // Find the closest ancestor which is a parent of both
    // the more link and the actual results list
    var $parent = $(this).closest('.parentSelector');
    $('.listSelector', $parent).children().show();
    return false; // Don't follow the link
});

The parts with the parent stuff above is for the case when you have multiple such results list on the same page and you need to separate them. If you don’t need it, here is a simpler variant:

$('.more').click(function() {
    $(this).hide();
    $('#results').children().show(); // Show all other list items
    return false; // Don't follow the link
});