在 ajax 调用之后，Rails 检查部分已完全加载答案

【问题标题】：Rails check partial is fully loaded following ajax call在 ajax 调用之后，Rails 检查部分已完全加载
【发布时间】：2015-12-10 15:45:36
【问题描述】：

我在 ajax 调用后渲染了一个部分：

show.js.erb

$("#notice_feed").html("<%=j render 'shared/notice_feed' %>")

_notice_feed.html.erb

<ol class="notices" id="notice_list">
  <%= render @notices %>
</ol>

这最终会呈现@notices 的列表。每个通知的名称都列在右侧，当您单击名称时，我有一些 jquery 可以向下滚动到相关呈现的 @notice：

name.on('click', function() {
  $("#absolute-div").animate({scrollTop: $('#notice_' + this.className).offset().top -200 }, 500); 
});

当您单击名称时，它会正确地向下滚动，但有时会在正确的@notice 上停止滚动，而对于其他@notices 则无处可寻。我怀疑问题是在整个部分列表完成渲染之前调用了 jquery。我试过用

包围javascript

$(window).on("load", function() {
  ...
};

但这不会触发，大概是因为在加载原始页面时它已经触发了。

如何使用 jquery 检查 ajax 调用之后的部分是否已完全加载？

或者有没有更好的方法来识别一个 div 并准确地滚动到它？

【问题讨论】：

check if an element exists with jquery 很容易，所以也许您想将其用作允许点击的入口？您正在使用的当前检查无法判断是否还有更多部分要加载。
也许您可以尝试使用$(function() { // Handler for .ready() called. }); 而不是$(window).on("load", function() { ... };
"我在 ajax 调用后渲染了一个部分：" 这是在回调还是内联？如果它在回调中，则将您的其他代码放在同一个回调中。如果不是，那么它应该是。
ajax 命中控制器的show 动作，然后调用show.js.erb。

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

您可以通过两种方式做到这一点：

轨道方式：

在 js 上创建一个方法来调用类似这样的动画滚动：

name.on('click', function() {
  scrolling_to(this.className);
});
function scrollin_to(name){
  $("#absolute-div").animate({scrollTop: $('#notice_' + name).offset().top -200 }, 500); 
}

然后，在 show.js.erb 中这样做：

 scrolling_to(@notice_show.name);

Js方式：

使用ajax调用rails路由：

jQuery.ajax({
          type: 'get',    
          url: 'your url here',
          dataType: 'json',
          cache: false,
          success: function(data, textStatus){
            $("#notice_feed").html(data.msg);
            $("#absolute-div").animate({scrollTop: $('#notice_' + data.name).offset().top -200 }, 500);
          }
        });

Rails 显示方法：

def show
  data ={
   msg: @notice_feed
   name: @notice_feed.name
  }
render json: data;
end

【讨论】：

【解决方案2】：

解决了。我将.offset() 更改为.position()。现在效果很好。

name.on('click', function() {
  $("#absolute-div").animate({scrollTop: $('#notice_' + this.className).position().top -200 }, 500); 
});

我需要 @notices 相对于父级的位置，而不是文档 (jQuery here)。

【讨论】：