paulirish/infinite-scroll — pull request #150 by arief-hidayat (2012-04-18 02:21:59+00:00)
Title: Handling JSON data.

Hi,

I face the same problem with #103 and ended up modifying the file to handle it properly. So perhaps you can review it and pull it if it's ok.

Basically:
1. If dataType is JSON and appendCallback is true -> user need to define additional option called "template" to render JSON into HTML
2. If data Type is JSON and appendCallback is false --> the callback input param will be the JSON object instead of string. It's up to user to handle it inside callback.

Here's the usage:

var _tweetsInfiniteScrollOptions = {
dataType: 'json', // we expect JSON
navSelector : '#twitter-page-nav', // selector for the paged navigation
nextSelector : '#twitter-page-nav a', // something like URL?page=2 this URL will return JSON
itemSelector : '.tweet', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
},
animate : true,
// template is mandatory if append callback is true.
template: function(data) {
var msg = "";
for(var i=0;i

var _infiniteScrollCallback = {
withAppendCallback : function(containerSelector) {
return function( newElements ) {
$theCntr = $(containerSelector);
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
var newItems = new Array();
$newElems.each(function(){
var item = $(this);
item.css({ opacity: 0 });
$theCntr.append(item);
newItems.push(item.attr('id'));
});
_addMasonryItem(newItems);// I'm using it with masonry.
}
},
noAppendCallback : function(containerSelector) {
return function( jsonData ) {
$theCntr = $(containerSelector);
var newElements = "";
var newItems = new Array();
for(var i=0;i

then the instantiation is as follow

var $theCntr = $(_tweetsSelector);
window.console && console.log ("setup infinite scroll." + $theCntr.attr("id"));
var infScrollCallback = _infiniteScrollCallback.noAppendCallback(_tweetsSelector)
if(_tweetsInfiniteScrollOptions.appendCallback == undefined ||
_tweetsInfiniteScrollOptions.appendCallback)
infScrollCallback = _infiniteScrollCallback.withAppendCallback(_tweetsSelector)
$theCntr.infinitescroll(_tweetsInfiniteScrollOptions,infScrollCallback);