usf noor usf noor - 2 years ago 127
HTML Question

How to append data to the repeater control from client side

I want to append data to the repeater, the repeater has some data already on page load. But i want to remaing load data while Scrolling Page down.

<script type="text/javascript">

$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {

function showData() {
PageMethods.getData(onSuccess, onError); // getData is a page webmethod thats return five record in json string.
function onSuccess(data) {
alert(data); // data has all five record.
function onError(data) {



<div id="Posts" class="container-fluid padded">
<asp:Repeater ID="PostsRepeater" runat="server">
<div class="col-md-2">
<img src="images/" <%#("ImagePath") %> alt="<%#Eval("username") %>" class="img-circle img-responsive" />
<div class="col-md-10">
<b><%#Eval("username") %></b><p><span class="glyphicon glyphicon-time"></span>Posted on Feb <%#Eval("CreationDate") %></p>
<p><%#Eval("Status") %></p>
<img src="images/1451285316491.jpg" class="img-responsive">
<div class="row commentbox">
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive user-photo img-circle" src="images/1451285316491.jpg">
<!-- /thumbnail -->
<!-- /col-sm-1 -->
<div class="col-sm-10">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Ali</strong> <span class="text-muted">commented 5 days ago</span>
<div class="panel-body">
This Is awsome post
<!-- /panel-body -->
<!-- /panel panel-default -->
<!-- /col-sm-6 -->
<!-- /row commentbox -->
<img id="loader" class="img-responsive col-md-offset-4" alt="" src="images/loading.gif" style="display:none" />

Answer Source

On window scroll, you can make a jQuery Ajax call which returns data and on success method get the response and bind it to your parent Div Posts (i.e. repeator control)

Edited: Code to bind data .i.e( Ajax success method)

function OnSuccess(response) {
    var items = response.d;
    var fragment='';
    $.each(items, function (index, val) {

    var aData_imgSRC= val.imgSRC;
    var aData_USERNAME= val.USERNAME;        

     // ..... 

   fragment += "<section> <div class='col-md-2'>  <img src='"+aData_imgSRC+"'   class='img-circle img-responsive' />  </div>   <div class='col-md-10'>    <div>   <b>"+aData_USERNAME+"</b><p><span class='glyphicon glyphicon-time'></span>Posted on Feb "+aData_Date+"></p> </div>  <hr>   <p>"+aData_Status+"</p>    <img src='images/1451285316491.jpg' class='img-responsive'></div>  </section>";

Link: How to consume Webmethod in C#

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download