Question

我在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并准确滚动它？

Answer 1

您可以通过两种方式执行此操作：

Rails方式：

在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 show method：

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

Answer 2

解决了它。我将.offset()更改为.position()。现在它运作得很好。

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

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

在ajax调用之后，Rails检查部分已满载

2 个答案: