Làm cách nào để triển khai jScroll?

Question

Im một người mới bắt đầu trong JS & jQuery vì vậy hãy chịu với tôi.

Tôi đang cố gắng tạo danh sách động <ul> bằng cách sử dụng JS và cuối cùng là hoạt động của nó. Bây giờ tôi cần phải thực hiện khái niệm cuộn vô hạn trong danh sách của tôi, sử dụng plugin jScroll.

Vì vậy, tôi đã nghiên cứu rất nhiều về jScroll, nhưng tôi không thể tìm thấy bất kỳ hướng dẫn nào tôi cần. Hầu hết các hướng dẫn sử dụng ngôn ngữ PHP khá nhiều, trong trường hợp của tôi tôi đã thực hiện mã máy chủ (PHP) của mình bằng cách sử dụng truy vấn SELECT đơn giản với LIMIT và OFFSET trên đó và trả lại json.

Đây là mã của tôi jQuery/AJAX mà tạo ra các danh sách động từ cơ sở dữ liệu, của nó đã làm việc:

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

Bởi vì danh sách năng động của tôi đã được làm việc, bây giờ tôi chỉ cần thực hiện các jScroll. Tuy nhiên, tôi không hiểu mã của nó, như:

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

Làm cách nào để thực hiện điều này trong trường hợp của tôi? Tôi chỉ cần thêm <li> vào jQUery/AJAX của tôi, vậy làm thế nào về nextSelector?

Bất kỳ trợ giúp nào được đánh giá cao, vui lòng chỉ hỏi bạn có câu hỏi nào không.

Cảm ơn sự giúp đỡ của bạn: D

Answer 1

Bạn có mọi thứ cần thiết để gọi jscroll vào đúng thời điểm.

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