Ruby on Rails javascript 操作响应 (js.erb) 正在呈现新的部分，但不执行 ui 效果答案

【问题标题】：Ruby on Rails javascript action response (js.erb) is rendering new partial, but not performing ui effectsRuby on Rails javascript 操作响应 (js.erb) 正在呈现新的部分，但不执行 ui 效果
【发布时间】：2013-04-10 03:13:26
【问题描述】：

上下文：

我有两个模型，模型 1 和模型 2。 Model1 has_many model2's。在model1 的管理页面中，我呈现了一个_model2.html.erb 文件列表，每个model2 对应一个与model1 关联的文件。为了让用户从 model1 管理页面创建一个新的 model2，我在 model2 的视图目录下创建了一个 create.js.erb 文件。该文件目前如下所示：

$('#back').hide();
$('#allTab').removeClass('active');
$('#activeTab').addClass('active');
$('#completeTab').removeClass('active');
$('html,body').animate({
    scrollTop: $('html,body').scrollHeight
}, {
    duration: 600,
    queue: false
});
$('#activeTabList').closest('.number_of_model2s').text("<%= @model1.model2s.count %>");
$('#activeTabList').append("<li><%= escape_javascript(render partial: 'model2s/model2', locals: {f: @model2, g: @model1}) %></li>");
$('#activeTabList').last().children().effect('highlight', {}, 3000);

问题：

我必须在 model2 控制器的 create 方法中为 @model1 创建一个定义，以使部分工作的渲染工作。但我无法获得任何动画或突出显示。这个列表可能会很长，这就是我想滚动到页面底部的原因。我希望用户看到添加到列表中。突出显示不是很重要，但我正试图让它工作，因为我也有一个更新操作以类似的方式工作，我想突出显示被更新的部分（我删除了部分在那里，然后我在同一个地方再次请求相同的模型 2 的部分）。

问题：

似乎执行的唯一代码行是渲染部分行是否有特殊原因？

更多信息：

如果我用

替换上面的部分渲染行，甚至不会渲染部分

$('#activeTabList').append("<li id='model2_<%= @model2.id %>'><%= escape_javascript(render partial: 'model2s/model2', locals: {f: @model2, g: @model1}) %></li>");

在管理页面html中，我以这种方式指定列表项的id，但是如果我在此处添加id，则部分不会呈现。这似乎与我遇到的问题有关吗？

【问题讨论】：

我很困惑。新创建的部分是否真的出现了？只是不突出？解释什么有效，什么无效。
没错。只要渲染部分行中只有一个 <%= %> 标记，它就会将部分附加到已经存在的部分列表中。但是滚动和突出显示永远不起作用。到目前为止 ;) 此外，上面几行嵌入的 ruby 没有被执行。我有信心使用该语句正确找到 DOM 元素
您检查浏览器的错误控制台是否有消息？ Javascript 错误将显示在那里。

标签： ruby-on-rails ajax jquery-ui renderpartial

【解决方案1】：

这可能无法挽救局面，但该动画存在一些错误。使用这个：

$('body').animate({
    scrollTop: $('body')[0].scrollHeight
}, {
    duration: 600,
    queue: false
});

【讨论】：

【解决方案2】：

我终于让它滚动了。 @gg_s，您的回答有助于我的动画滚动方法的语法，然后我必须修复它以与 mozilla 一起使用。这对我有用：

var $new_campaign_li = $('#activeTabList').children('li').last();
$(jQuery.browser.webkit ? 'body': 'html').animate({
    scrollTop: $new_model2_li.offset().top + $new_model2_li.children().height() / 2 - $(window).height() / 2
}, {
    duration: 600,
    queue: true
});// This delay doesn't seem to work: .delay(1000);
$new_model2_li.children().effect('highlight', {color: '#71EC5E'}, 1500);

高光效果修复了一个愚蠢的遍历错误。但是我确实注意到queue是设置为true还是false，即使我使用delay(1000)，这两个动画也是同时运行的。它按我想要的方式工作！谢谢！

【讨论】：