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