0

load on page scroll を使用しています。このリンクから http://aspsnippets.com/Articles/Load-data-while-Scrolling-Page-down-with-jQuery-AJAX-and-ASPNet.aspx

ページの読み込み時に、テーブルの形式で 10 件のレコードが表示されます。一意の ID をデータベースからテーブルにバインドしています。10 行目のバインド ID を正しく開始しますが、10 行目以降に {source code} が表示されます。10 行目以降のすべてのテーブルの ID は同じで、最初のテーブルの ID を取得しています。削除が完了したときにテーブルを削除するために、このテーブルの一意の ID を使用しています。このテーブル内でユーザーコントロールも使用しています。ユーザーコントロールは、テーブルと同じように動作しています。10行目以降、ユーザーコントロールは最初のテーブルのIDを繰り返します。これが私のコードです。

 <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>

このIDをテーブル(リピーター内)とユーザーコントロールにバインドし、10行目以降は繰り返さないでください。

 <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>
4

1 に答える 1

2

問題だと思います。クローン後にテーブルIDを変更しません。それを試していただけますか？

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();
    }
于 2013-06-22T07:25:04.883 に答える