My first jQuery plugin

Version francaise

jQuery.UnlimitedScroll.js is a jQuery plugin which:

• Creates a list item from an Ajax call
• Add lines to the end whenever the scroll reaches the end of the page
• Add a timer which inserts rows top of the list if new data is detected

demo :

How to use jQuery.unlimitedscroll :

Add jQuery

<script src="jquery.min.js" type="text/javascript">
</script>

In Ready event, call init of plugin

$(document).ready(function () {
    $("#myElement").unlimitedscroll('Ajax/MyDataService',
     function (data) { return MakeItem(data); },
   {
       timer: 60000,
       timerUrl: ‘Ajax/MyTimerDataService’,
       IndexFieldName: ‘date’
    });
});

Syntax 

$(DomElem).unlimitedscroll (url, itemfunction, options)

• Url : Url of Ajax service called for the first load it should return Data (JSon)
• itemFunction: function called to made each element

options :

• pageSize: Number of elements read each time (also in initial load) (defaut= 15)
• maxPages: Max number of pages (default : -1 => no limit)
• IndexFieldName: field name use for know if there is new data to read
• timer: 0 : delay between each call (milisecondes) (default 0 => no timer)
• timerUrl: Url of Ajax service called by timer, it must take ‘IndexFieldName’ parameters and it should return Data (JSon)
• on_complete: event fired when load (initial & timer) is completed
• on_loading: event fired just before load (initial & timer),
• on_loaded: event fired just after load (initial & timer),
• on_error: event fired if something wrong happen

Creates function which make the element contents (Data come from Ajax)

function MakeItem(data) {
    return $("<div>"+data.myContent+"</div>");
}

Download here

Thanks 

To realize this plugin, I started with this good article for beginners and for the scrolling part, I am inspired by this.

///