Come implementare jScroll?

Question

Im un principiante in JS & jQuery quindi per favore abbiate pazienza con me.

Sto cercando di creare un elenco dinamico <ul> utilizzando JS e infine il suo funzionamento. Ora ho bisogno di implementare il concetto di scrolling infinito nella mia lista, usando il plugin jScroll.

Quindi ho studiato molto su jScroll, ma non riesco a trovare alcun tutorial di cui avessi bisogno. La maggior parte delle esercitazioni utilizzano la lingua PHP praticamente, mentre nel mio caso ho fatto il mio server (PHP) codice utilizzando semplice query SELECT con LIMIT e OFFSET su di esso e restituendo un json.

Questo è il mio codice jQuery/AJAX che creano l'elenco dinamico dal database, sua già lavorando:

$.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++; 
      }); 
     } 
    } 
}); 

Perché il mio elenco dinamico è già al lavoro, ora ho solo bisogno di implementare il jScroll. Tuttavia, non capisco il suo codice, come ad esempio:

$('.infinite-scroll').jscroll({ 
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...', 
    padding: 20, 
    nextSelector: 'a.jscroll-next:last', 
    contentSelector: 'li' 
}); 

Come implementarlo nel mio caso? Appendo semplicemente lo <li> nel mio jQuery/AJAX, quindi che ne dici dello nextSelector?

Qualsiasi aiuto è gradito, basta chiedere se avete qualche domanda.

Grazie per il vostro aiuto: D

Answer 1

È Hava ogni cosa prety molto impostato solo bisogno di chiamare jscroll a tempo debito.

$.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' 
}); 
}