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

I render a partial after an ajax call:

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

This ends up rendering a list of @notices. The names of each notice are listed on the right and I have some jquery to scroll down to the relevant rendered @notice when you click on the name:

这最终会呈现一个@notices列表。每个通知的名称都列在右边,当你点击名字时,我有一些jquery向下滚动到相关的渲染@notice:

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

When you click on the name it correctly scrolls down, but only sometimes stops scrolling on the correct @notice, and gets nowhere near for other @notices. I suspect the problem is that the jquery is called before the whole partial list has finished rendering. I've tried surrounding the javascript with

单击名称时,它会正确向下滚动,但有时只会停止在正确的@notice上滚动,并且对于其他@notices无处可去。我怀疑问题是在整个部分列表完成渲染之前调用了jquery。我试过围绕javascript

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

but this doesn't fire, presumably because it already fired when the original page was loaded.

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

How do I check that a partial following an ajax call has fully loaded using jquery?

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

Or is there a better way to identify a div and scroll to it accurately?

或者有更好的方法来识别div并准确滚动它吗?

2 个解决方案

#1

You can do this in two ways:

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

Rails way:

Make a method on js for call the animate scroll something like that:

在js上创建一个方法来调用animate滚动类似于:

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

Then, in show.js.erb do that:

然后,在show.js.erb中执行以下操作:

 scrolling_to(@notice_show.name);

Js way:

Use ajax to call to the rails route:

使用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:

Rails显示方法:

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

#2

Solved it. I changed .offset() to .position(). Now it works beautifully.

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

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

I needed the position of the @notices relative to the parent, not the document (jQuery here).

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

#1