【问题标题】:rails endless scroll with kaminari, event not triggering用 kaminari 无限滚动,事件未触发
【发布时间】:2014-07-28 16:08:11
【问题描述】:

闲逛了 Ryan Bates 的无尽滚动教程,但不明白为什么它不起作用;/部分不更新

localfeeds/show.html.erb

<div class="row">
        <div class="col-md-8">
            <div id="infinite-table">
            <%=render :partial => 'scribbles/scribbles', :locals => {:scribbles => @scribbles}%>
            </div>
        </div>
</div>
<%= paginate @scribbles %>

localfeeds.js.coffee

jQuery ->
     if $('.pagination').length
          $(window).scroll ->
                  url = $('.pagination .next a').attr('href')
                  if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
                          alert("test2")
                          $('.pagination').text('Fetching more products...')
                          $.getScript(url)
     $(window).scroll()  

localfeeds/show.js.erb

// Append new data
$('#infinite_table').append('<%= j render(:partial => 'scribbles/scribbles', :scribbles => @scribbles) %>');

<% if (@scribbles.current_page < @scribbles.num_pages) %>
$('.pagination').replaceWith('<%= j paginate(@scribbles) %>');
<% else %>
$('.pagination').remove();
<% end %>

请帮忙

Safari HTML 渲染

【问题讨论】:

  • 通过将console.log([string or param]) 放在 JS/CS 文件的开头和结尾来确保您的 JS 正在加载和运行。它们应该出现在您的 Firefox/Firebug 或 Chrome 控制台中。还要检查控制台是否有任何 JS 错误。你能发布渲染的标记吗?
  • localfeeds.js.coffee 已加载,将 alert('test') 移至顶部并弹出并出现在 firebug 中。将 console.log([string or param]) 添加到 js 会引发错误,这是我在 firebug 中遇到的唯一 js 错误。
  • 抱歉,我的意思是将 [string or param] 替换为字符串,例如“Woo!成功了!”或像 $('#infinite_table') 之类的参数。如果您将复杂对象放入 console.log,您将能够在控制台中导航它。
  • 仍然没有得到任何指向问题的错误
  • 如果您发布呈现的标记,我可以查找您可能遗漏的任何 JQuery 选择器错误。同时,您可以使用 console.log 和控制台作为分析代码的工具。你知道 localfeeds/show.js.erb 是否正在执行吗?您也可以在那里使用console.log。或者如果您必须发出警报;)

标签: javascript ruby-on-rails ruby-on-rails-3 kaminari railscasts


【解决方案1】:

localfeeds/show.js.erb

// Append new data
$('#infinite_table').append(...

但是在你的 HTML 中你有:

<div id="infinite-table" ....

第一个用_,第二个-

编辑:

从您的 cmets 看来,错误出现在您的滚动检测代码中。试试这个,看看控制台输出的线索:

jQuery ->
     console.log("Creating pagination callback")
     if $('.pagination').length
          console.log("Pagination detected")
          $(window).scroll ->
                  console.log("Scroll detected")
                  url = $('.pagination .next a').attr('href')
                  if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
                          console.log("Url found: " + url)
                          $('.pagination').text('Fetching more products...')
                          $.getScript(url)
                          console.log("Script loaded")
     $(window).scroll()  

如果有的话,哪些控制台日志语句会导致控制台日志中的条目?滚动页面时会发生什么?

【讨论】:

  • 是的,这是问题之一。但是当我向下滚动时它仍然没有更新。如果我添加一个像 ' true)%>' 这样的按钮,它会触发 show.js.erb 并且 ajax 会呈现另一个页面。
  • 在 development.log 中没有记录任何消息;/
  • 您需要查看浏览器检查器的控制台选项卡。假设您使用的是 Chrome,请右键单击任何元素并选择“检查元素”。您将获得一个带有一些选项卡的新面板,其中包括一个名为“控制台”的选项卡。在加载页面并滚动时查看那里。
  • 这是有史以来最愚蠢的事情,因为空格和缩进,代码不起作用。现在确实如此,[Log] 检测到滚动(localfeeds.js,第 14 行)[Log] Url found: /localfeeds/1?page=2(localfeeds.js,第 17 行)[Log] 脚本加载(localfeeds.js ,第 20 行)[日志] 检测到滚动(localfeeds.js,第 14 行,x1472)但它没有通过第 2 页 :(
  • 当您在控制台窗口中键入它时会发生什么? $.getScript('/localfeeds/1?page=2')
【解决方案2】:

只是一个观察,但是在初始化代码中除了一次之外,$(window).scroll() 在哪里被调用?

如果有分页数据,代码会创建该方法,然后调用它一次,不管它在哪里被再次调用?此外,如果没有分页数据,第一次滚动调用将中断...

如果没有更多代码,我无法取消选择它,这可能只是我的图片不完整。

【讨论】:

  • api.jquery.com/scroll window.scroll 设置一个处理程序。立即调用可确保在需要时加载第一波结果。
  • 谢谢 - 否则这将是那些 d'oh 时刻之一 :) 我想知道是否有任何控制台错误阻止此加载/发生...?
  • ActiveRecord::RecordNotFound - 找不到带有 id=[object Object] 的 Localfeed:看起来可能有 500 错误可能会破坏事情
  • [object Object] 来自 js - 这意味着在需要字符串或数字的地方使用了一个对象
猜你喜欢
  • 2014-11-14
  • 2012-08-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多