Question

Am parsing XML data with AJAX success method , And placing in table with LOAD MORE data option , when user clicks on LOAD MORE button ,first time it get add next N items ,when user click on second time the same items getting added to list .

Below is my code ,

function populateItems(position,page_size) {
    var url = "path_to_XML";
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: function(xml) {
  var title, url, block_count;
  var xmlDOM = $(xml);
  block_count = $(xml).find('item').length;
  xmlDOM.find("item").slice(position,position+page_size).each(function(){
            var $this=$(this);
            var $user=$this.find("user").text();
            var $fname=$this.find("fname").text();
            var $lname=$this.find("lname").text();
            var $sex=$this.find("sex").text();
            var $time=$this.find("time").text();
            $("#datatable").append("<tbody><tr class='datarow'><td>"+$time+"</td><td>"+$user+"</td><td>"+$fname+"</td><td>"+$lname+"</td><td>"+$url+"</td></tr><tbody>");
  });
                    $('#ajax-loader').hide();
}
});
}

 $(document).ready(function() {
    var position;var page_size;
    populateItems(0,40);
            $('#append2').click(function(position){
                    $('#log_hourly').show();
                    $items = populateItems(40,40);
                    $("#content").append($items);
                    $('#ajax-loader').hide();
            });

How can keep adding next N items when user click on LOAD MORE button

Please Help..

Answer 1

As I answered here you need to create a variable that counts which page are you showing or want to load, just that in your case you need to increase it by 40 each time:

$(document).ready(function() {
    var page = 0;
    var position;var page_size;
    populateItems(page ,40);
    $('#append2').click(function(position){
        $('#log_hourly').show();
        page = page + 40;
        $items = populateItems(page ,40);
        $("#content").append($items);
        $('#ajax-loader').hide();
});