如何解决这个jquery无限加载/分页错误 [英] How to solve this jquery infinite loading/pagination error

问题描述

我正在尝试创建一个演示应用程序来执行像twitter这样的无限分页。我差不多了。我每次附加新div时都会传递必要的值。这是代码的一部分（减去SQL查询）



除了我需要添加（克隆）新div的部分之外，代码一切正常所以我可以把它附加到现有的。现在，我可以追加他们，但我没有得到正确的价值观。我该怎么做呢？我觉得它在我的代码的.clone部分附近



我尝试了什么：

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>

推荐答案

（ window ）。scroll（ function （）{
if （

(window).scroll(function () { if (

（ window ）。scrollTop（）==

(window).scrollTop() ==

（文件）。height（） -

(document).height() -

这篇关于如何解决这个jquery无限加载/分页错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！