on first time,when the scroll reaches the bottom ,the data gets loaded as wanted but that,when i scroll again to the bottom ,no data is loaded.....and 1 more thing,the data that is loaded on scroll displays the same images that items 1-10 had..... here's my datalist
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "Default.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert("Hell 1");
},
error: function (response) {
alert("Hell 2");
}
});
}
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>");
var rowCount = Math.ceil(customers.length / repeatColumns);
var i = 0;
while (i < repeatColumns * rowCount) {
var row = $("[id*=dlCustomers] tr").eq(0).clone(true);
for (var j = 0; j < repeatColumns; j++) {
var customer = $(customers[i]);
if (customer.length == 0) {
$("table:last", row).remove();
} else {
$(".name", row).eq(j).html(customer.find("Name").text());
$(".productId", row).eq(j).html(customer.find("ProductId").text());
$(".description", row).eq(j).html(customer.find("Description").text());
$(".imageUrl", row).eq(j).html(customer.find("ImageUrl").text());
$(".price", row).eq(j).html(customer.find("Price").text());
$(".quantity", row).eq(j).html(customer.find("Quantity").text());
}
i++;
}
$("[id*=dlCustomers]").append(row);
}
$("[id*=dlCustomers] tr").eq(0).remove();
$("[id*=dlCustomers]").show();
$("#loader").hide();
}