如何提交消息然后将其添加到消息列表顶部，而无需在 Ruby on rails 中刷新页面

Question

我有一个微帖子/消息传递系统，每次提交新的微帖子或评论/消息时，页面都会刷新以显示它。

由于我已经使用 ：remote => 在表单上设置了 ajax，我现在希望在不刷新页面的情况下添加微帖子或添加。

到目前为止，我有：

class MicropostsController < ApplicationController
def create
    if params[:micropost][:user_id].to_i == current_user.id
     @comment = Comment.new(:user_id => current_user.id)
        respond_to do |format|
            if @micropost.save
            format.js   { render :post_on_wall }
            else
            format.js   { render :form_errors }
            end
        end
    else

如果表单通过了所有验证，并且用户在单击发布之前实际输入了有效内容，则"if @micropost.save"将为真，它将在我命名为"post_on_wall"的文件中执行 js。如果"@micropost.save"，则"form_errors"中的代码将被执行。

在form_errors里面，我添加了一个警报，只是为了检查当用户不输入任何内容并单击帖子时，微帖子不会被发布。它工作正常。

在"post_on_wall"文件中，我有这个：

$('.microposts').prepend('<%= j render("users/partials/microposts") %>');

这样做的问题是它基本上抓取了在渲染为"

用户/部分/微帖子"的文件中循环访问的所有微帖子，然后将它们放在".microposts"div 中的所有内容之上。甚至位于".microposts"顶部的发布微帖子的实际表单也会被推到刚刚添加到页面的内容下方。在这种情况下，由于我使用分页并将per_page设置为 10，因此减少了 10 个空格。

这是我的 html 结构。

<div class='cf' id='content'>
    <div id='leftColumn'>
    </div>
    <div class='microposts'>
    </div>
    <div id='rightColumn'>
  </div>
</div>

每个微帖子及其相关评论都存储在一个名为".postHolder"的类中。

我觉得我这样做的方式是错误的。文件这个："用户/部分/微帖子"指向基本上有代码，有助于一次显示几个微帖子（10）。这用于与我正在尝试做的事情完全不同的事情（分页+无休止滚动）。

无论如何，我觉得我应该接近这个问题的方式是如何检测刚刚发布的新帖子。它应该被检测为一个新的".postHolder"类，然后在找到它之后，它应该被添加到"postHolder"列表的顶部，而不是替换它上面的micropost表单。

我想创建一个单独的div 来保存所有微帖子，然后将这个div 放在微帖子表单下方......这样我就不需要担心表单被下推，因为它不会在包含所有微帖子的div 中，事实上这将是我将要前缀的内容。

这仍然给我留下了获取刚刚发布的帖子然后将其添加到列表顶部的问题。

无论如何，我真的很想要一个可以帮助我实现此功能的示例或一些好的建议。

感谢您抽出宝贵时间亲切问候。

Answer 1

使用您当前的 HTML/部分结构，只需执行此操作（替换整个微帖子，因为这是您的部分创建的）。

$('.microposts').html('<%= escape_javascript render("users/partials/microposts") %>');

但是，将来，有一个呈现微帖子的_micropost部分，然后您可以轻松地在 .microposts 的顶部添加微帖子。