How to implement jScroll?

ajax, javascript, jquery, jscrollpane, scroll

Solution

You hava every thing prety much set just needed to call jscroll at proper time.

$.ajax({
        url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc
        type: "GET",
        error : function(jq, st, err) {
            alert(st + " : " + err);
        },
        success: function(result){
            //generate search result
            //float:left untuk hack design
            $('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>'
                            + '<br/>' 
                            + '<p>Found ' + result.length + ' results</p>');

            if(result.length == 0)
            {
                //temp
                alert("not found");
            }
            else{
                for(var i = 0; i < result.length; i++)
                {
                    //generate <li>
                    $('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>');
                }
                //After generation of <li> put a next link
                $('#list').append('<a href="#" class="jscroll-next">NEXT</a>');
                //call to jscroller to be triggered
                jscroller();
                var i=0;
                $(".box").each(function(){
                    var name, address, picture = "";
                    if(i < result.length)
                    {
                        name = result[i].name;
                        address = result[i].address;
                        picture = result[i].boxpicture;
                    }

                    $(this).find(".name").html(name);
                    $(this).find(".address").html(address);
                    $(this).find(".picture").attr("src", picture);
                    i++;
                });
            }
        }
        });

//The function to be called when <li> are rendered.
function jscroller(){
 $('.infinite-scroll').jscroll({
     loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
     padding: 20,
     nextSelector: 'a.jscroll-next:last',
     contentSelector: 'li'
 });
}

Problem

Im a beginner in JS & jQuery so please bear with me. Im trying to create a dynamic list `<ul>` using JS and finally its working. Now i need to implement the infinite scrolling concept in my list, using jScroll plugin. So i researched a lot about jScroll, but i cant find any tutorial i needed. Most of the tutorials using `PHP` language pretty much, while in my case i have done my server (`PHP`) code using simple `SELECT` query with `LIMIT` and `OFFSET` on it and returning a `json`. This is my jQuery/AJAX code that create the dynamic list from database, its already working : ``` $.ajax({ url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc type: "GET", error : function(jq, st, err) { alert(st + " : " + err); }, success: function(result){ //generate search result //float:left untuk hack design $('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>' + '<br/>' + '<p>Found ' + result.length + ' results</p>'); if(result.length == 0) { //temp alert("not found"); } else{ for(var i = 0; i < result.length; i++) { //generate <li> $('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>'); } var i=0; $(".box").each(function(){ var name, address, picture = ""; if(i < result.length) { name = result[i].name; address = result[i].address; picture = result[i].boxpicture; } $(this).find(".name").html(name); $(this).find(".address").html(address); $(this).find(".picture").attr("src", picture); i++; }); } } }); ``` Because my dynamic list is already working, now i just need to implement the jScroll. However, i dont understand its code, like : ``` $('.infinite-scroll').jscroll({ loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...', padding: 20, nextSelector: 'a.jscroll-next:last', contentSelector: 'li' }); ``` How to implement this in my case? I just append `<li>` in my jQUery/AJAX so how about the `nextSelector`? Any help is appreciated, please just ask if you have some question. Thanks for your help :D

Original source