asp.net c# datalist load data while scrolling page down

Question

0.00/5 (No votes)

See more:

this code is not working properly all the thing in .Net code is ok and SQL Query is ok but the issues in JQuery code because i use multiple table in datalist but this is not properly handle in JQuery. Kindly Help

XML

<head id="Head1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <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: "CS1.aspx/GetFollowersData",
                    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);
                    }
                });
            } GetFollowersData
        }
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var Followers = xml.find("Followers");
            var table = $("#dvFollowers table")
            Followers.each(function () {
                var Follower = $(this);
                var row = $("#dvFollowers table tr").eq(0).clone(true);
                $(".UserName", row).html(Follower.find("RowNumber").text());
                $(".FirstName", row).html(Follower.find("Reg_No").text());
                $(".LastName", row).html(Follower.find("Reg_Curr_Code").text());
                $(".Country", row).html(Follower.find("PostedOn").text());
                table.append(row);
            });
            $("#loader").hide();
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div id="dvFollowers">
            <asp:DataList Width="100%" ID="DataListFollowers" runat="server">
<ItemTemplate>
<table><tr><td><%# Eval("RowNumber") %></td></tr></table>
<table><tr><td><%# Eval("Reg_No")%></td></tr></table>
<table><tr><td><%# Eval("Reg_Curr_Code")%></td></tr></table>
<table><tr><td><%# Eval("PostedOn")%></td></tr></table>

                </ItemTemplate>
            </asp:DataList>
            <img id="loader" alt="" src="103.gif" style="display: none" />
        </div>
    </form>
</body>
</html>

Posted 6-Jun-15 2:55am

ksmtariqzafar

Updated 6-Jun-15 3:17am

v6

Add a Solution

Comments

ZurdoDev 6-Jun-15 21:51pm

You haven't said what the problem is or where you are stuck.

ksmtariqzafar 7-Jun-15 15:18pm

The issue is that when I use datalist without table in its itemtemplate so the result is ok but when I use multiple tables to make a design of page so it doesn't work properly.

ZurdoDev 7-Jun-15 17:03pm

And what does "doesn't work properly mean?"

ksmtariqzafar 8-Jun-15 1:04am

means: like i have data from 1 to 100 and i want to display the data 10 rows at a time
1
2
3
4
5
6
7
8
9
10
scrolling down....
11
12
13
14
15
16
17
18
19
20
scrolling down....
21
22
.
.
but when i scroll 1st time the data appear just first row in series like this

1
2
3
4
5
6
7
8
9
10
scrolling down....
1
1
1
1
1
1
1
1
1
scrolling down....
1
1
1
1
1
.
.
.
.
this is happen when i set the design in the Data list item template using multiple tables in it like this

<itemtemplate>
<table><tr><td><%# Eval("RowNumber") %></td></tr></table>
<table><tr><td><%# Eval("Reg_No")%></td></tr></table>
<table><tr><td><%# Eval("Reg_Curr_Code")%></td></tr></table>
<table><tr><td><%# Eval("PostedOn")%></td></tr></table>

but when i remove all the table with in the item template then the result is ok.

xszaboj 8-Jun-15 5:27am

Did you solved it? I think it might be problem in your OnSuccess method. Could you please provide me the html code of your page? I am interested in this div:
<div id="dvFollowers">

with table and correct + wrong rows

ksmtariqzafar 10-Jun-15 2:43am

i already provide the complete html page code in question please check.
and yes the problem in OnSuccess method because when i remove all the tables in datlist then the code is working fine but when i design the datalist with multiple table so it is not working properly which i define you in above comment

xszaboj 10-Jun-15 3:55am

yes, but I meant the generated code. The real html that is generated from template.

ksmtariqzafar 13-Jun-15 0:52am

<asp:DataList ID="dlDetails" runat="server" OnItemDataBound="dlDetails_ItemDataBound"
OnItemCommand="dlDetails_RowCommand" RepeatColumns="2" RepeatDirection="Horizontal">
<itemtemplate>
<table id="tbldetail" width="345px" cellpadding="2" cellspacing="1" class="comment_box"
style="margin: 5px 14px 13px 2px;box-shadow: 0px 0px 7px rgba(215, 215, 215, 0.89);border: 1px solid #E4E4E4;">
<tr>
<td>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select" CommandArgument='<% #Bind("TopicId") %>'
CssClass="forumnew_member_ActivityStatus">
<table cellpadding="1" cellspacing="1" width="320px" class="forumnew_member_ActivityStatustable">
<tr>
<td width="30px" valign="top">
<div style="float:left;margin-right: 2px;border: 1px solid #BABABA; padding:0px">
<asp:Image ID="Image1" runat="server" ImageUrl='<%#"~/"+Eval("PostedByPicture")%>'
CssClass="forumnew_topic_pic_ActivityStatus" />
</div>
</td>
<td width="190px">
<div valign="top">
<span class="forumnew_member_name">
<asp:Literal ID="lblPostedBy" runat="server" Text='<%# Eval("PostedBy") %>'>
</span><br />
<span class="forumnew_member_id">
<asp:Literal ID="lblPostedStatus" runat="server" Text='<%# Bind("PostedStatus") %>' ></span>
</div>
</td>
<td width="110px" align="right" style="color: #4E4E4E;"><span class="fa fa-clock-o"></span>
<asp:Label ID="lblPostedDate" runat="server" Text='<%# Bind("PostedDate") %>'>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td valign="top">
<div style="float:left;">
<span class="forumnew_member_id">Topic Creater | </span>
<span class="forumnew_member_name">
<asp:Literal ID="lblID" runat="server" Text='<%# Bind("ID") %>' Visible="false">
<asp:Literal ID="lblname" runat="server" Text='<%# Eval("name") + ", " %>'>
</span>
<span class="forumnew_member_id">
<asp:Literal ID="lblRegNo" runat="server" Text='<%# Bind("Reg_Curr_Code") %>' ></span>
</div>
</td>
</tr>
<tr>
<td valign="top">
<span class="forumnew_detail_heading">

<asp:Label ID="lblTopic" runat="server" Text='<%#Bind("Topicname") %>'>

</span>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="1" class="forumnew_detail_date">
<tr>
<td width="10px"><span class="fa fa-comments"></span></td>
<td width="90px"><asp:Literal ID="lblComments" runat="server" Text='<% #Bind("Comments") %>'></td>
<td width="10px"><span class="fa fa-eye"></span></td>
<td width="90px"><asp:Literal ID="lblViews" runat="server" Text='<% #Bind("Views") %>'></td>
<td width="10px"><span class="fa fa-thumbs-up"></span></td>
<td width="90px"><asp:Literal ID="lblLikes" runat="server" Text='<% #Bind("Likes") %>'></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="240px">
<asp:DataList ID="dlImageList" runat="server" RepeatDirection="Horizontal">
<itemtemplate>
<asp:Image ID="imgPic" runat="server" ImageUrl='<%#"~/"+Eval("PictureName")%>'
style="border: 1px solid rgb(218, 218, 218);" Width="30px" Height="30" />

</td>
<td valign="top" align="left" style="padding-top:1px;">
<asp:Panel ID="involedPopupPanel" runat="server">
<div class="forumnew_people_more">
<asp:Label ID="lblInvolveCount" runat="server">
</div>

</td>
</tr>
</table>
</td>
</tr>
</table>

<itemstyle verticalalign="Top">

xszaboj 15-Jun-15 4:21am

this is not exactly code of from this div: <div id="dvFollowers">

because if I am correct this is the div you are trying to fill with your data right?

ksmtariqzafar 13-Jun-15 0:58am

this is the real code for you, the problem is in OnSuccess method otherwise all the code is working perfectly

ksmtariqzafar 15-Jun-15 1:06am

xszaboj, I am waiting for your response

xszaboj 15-Jun-15 4:20am

Sorry I wasn't online over weekend. Did you tried to check if Followers is filled with correct data?

ksmtariqzafar 15-Jun-15 9:11am

Yes I checked the data is fine

ksmtariqzafar 15-Jun-15 9:14am

I think some more programming required in onsucess function for the multiple tables used in datalist. But that is I really don't know

xszaboj 15-Jun-15 12:19pm

yes i think that the problem is this: $(".UserName", row)
because if you try to debug it. It will return empty array, so you never change anything you just replicate the first row/table.

xszaboj 15-Jun-15 12:27pm

and one more suggestion dont you want to do something more like this?
http://codepen.io/xszaboj/pen/dozvbm

I dont know why you wrap every row into a table is there a reason for that?

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)