I'm trying to create a demo application to do "infinite pagination" something like twitter. I'm almost close though. The little challenge I have is passing the necessary values each time I append the new div. Here is a part of the code(minus the SQL queries)
Everything works fine with the code apart from the part where I need to add(clone) a new div so I can append it to the existing ones. For now, I can append them but I'm not getting the right values. How do I do this? I feel its somewhere around the .clone part of my code
What I have tried:
<div class="row">
<div id="dvProducts" class="col-md-12">
<asp:Repeater ID="PRepeater" runat="server">
<HeaderTemplate></HeaderTemplate>
<ItemTemplate>
<div class="col-md-3">
<div class="thumbnail link">
<a href="Single.aspx?This=<%#Eval("Code") %>" class="code">
<img src='<%#"data:Image/jpg;base64,"+ Convert.ToBase64String((byte[])Eval("Image1")) %>' alt="" style="width:100%; height:250px" class="img-responsive myImage" />
</a>
</div>
<div id="view">
</a><a href="Singleproduct.aspx?This=<%#Eval("Code") %>" class="btn">View Product</a></a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<div class="col-md-offset-5">
<img id="loader" alt="" src="bootstrap/images.png" style="display: none" />
</div>
</div>
</div>
<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: "Records.aspx/GetRec",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
async: false,
cache: false,
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("MyRecords");
customers.each(function () {
var customer = $(this);
var table = $("#dvProducts div").eq(0).clone(true);
$(".link", table);
$(".myImage", table).html(customer.find("Image1").text());
$(".view", table);
$("#dvProducts").append(table);
});
$("#loader").hide();
}
</script>