binding data through jquery to table - asp.net

Question

I am using load on page scroll . from this link
http://aspsnippets.com/Articles/Load-data-while-Scrolling-Page-down-with-jQuery-AJAX-and-ASPNet.aspx
On page load it display's 10 record in form of table, I am binding unique id to table from database. Starting 10 row's bind id correctly , but after 10th row I see {source code}, Id on all table after 10th is same it's taking id on first table. I am using this table unique id for removing table when delete is done.
I am also using a usercontrol inside this table. Usercontrol is behaving in the same way as table. After 10th row usercontrol repets id of first table. Here's my code.
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
GetRecords();
}
});
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: 'CS.aspx/GetCustomers',
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var customers = xml.find("Customers");
customers.each(function () {
var customer = $(this);
var table = $("#dvCustomers table").eq(0).clone(true);
$(".name", table).html(customer.find("Title").text());
$(".city", table).html(customer.find("Description").text());
$(".postal", table).html(customer.find("UserID").text());
$(".country", table).html(customer.find("EmailID").text());
$(".phone", table).html(customer.find("Status").text());
$(".fax", table).html(customer.find("UserID").text());
$(".MainCommentscont", table).html(customer.find("ID").text());
$(".MainComments", table).html(customer.find("ID").text());
$("#dvCustomers").append(table).append("<br />");
});
$("#loader").hide();
}
</script>
I want this ID should bind with table(inside repeter) and usercontrol and should not repeat after 10th row.
<form id="form1" runat="server">
<table>
<tr>
<td>
<div id="dvCustomers">
<asp:Repeater ID="rptCustomers" runat="server">
<ItemTemplate>
<table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
border: dashed 2px #04AFEF; background-color: #B0E2F5" class="MainCommentscont" id='<%# Eval("ID")%>'>>
<tr>
<td>
<b><u><span class="name">
<%# Eval("Status")%></span></u></b>
</td>
<td>
<b>Desc: </b><span class="MainComments">
<%# Eval("ID")%></span><br />
<b>Desc: </b><span class="city">
<%# Eval("Description")%></span><br />
<b>User: </b><span class="postal">
<%# Eval("UserID")%></span><br />
<b>Email: </b><span class="country">
<%# Eval("EmailID")%></span><br />
<b>point: </b><span class="phone">
<%# Eval("Status")%></span><br />
<b>Fax: </b><span class="fax">
<%# Eval("UserID")%></span><br />
</td>
</tr>
</table>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</td>
<td valign="bottom">
<img id="loader" alt="" src="loading.gif" style="display: none" />
</td>
</tr>
</table>
</form>

Answer 1

I think problem, you don't change table ID after clone. Could you try that?
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var customers = xml.find("Customers");
customers.each(function () {
var customer = $(this);
var table = $("#dvCustomers table").eq(0).clone(true);
$(".name", table).html(customer.find("Title").text());
$(".city", table).html(customer.find("Description").text());
$(".postal", table).html(customer.find("UserID").text());
$(".country", table).html(customer.find("EmailID").text());
$(".phone", table).html(customer.find("Status").text());
$(".fax", table).html(customer.find("UserID").text());
$(".MainCommentscont", table).html(customer.find("ID").text());
$(".MainComments", table).html(customer.find("ID").text());
//Change table ID
$(table).attr('ID',customer.find("ID").text());
//-
$("#dvCustomers").append(table).append("<br />");
});
$("#loader").hide();
}