Question

提交表单后，我想将保存的记录添加到包含所有记录的div中，或刷新div或最佳实践。

我根本不确定如何做到这一点，所以我的create.js.erb文件中的代码只是猜测。

表格

<%= form_for @comment, remote: "true" do |f| %>
  <%= f.hidden_field :chat_id, value: @chat.id %>
  <%= f.text_area :content %>
  <%= f.submit "Send" %>
<% end %>

控制器

def create
  @comment = Comment.new(creation_params)
  @comment.user_id = current_user.id

  if @comment.save
    respond_to do |format|
     format.js
     format.html
    end
  else
    redirect_to root_path
  end
end

create.js.erb

$("#comments").append("<%= @chat.comments.last %>");
$('#comment_content').val('').focus();

评论div

<ul id="comments">
<% @chat.comments.each do |comment| %>
  <li id="comment-<%= comment.id %>">
    <%= comment.user.name %>
    <%= comment.content %>
  </li>
<% end %>
</ul>

Answer 1

对我来说看起来很不错，但我看到了一些可能需要修复的事情。我承认自己也是新手，但是我已经使用Rails几次使用Ajax，所以我希望我的建议很有帮助。

<强>表格

将字符串"true"替换为true中的布尔remote: "true"。

<%= form_for @comment, remote: true do |f| %>
  <%= f.hidden_field :chat_id, value: @chat.id %>
  <%= f.text_area :content %>
  <%= f.submit "Send" %>
<% end %>

<强>控制器

在{render layout: false, content_type: 'text/javascript'}之后添加format.js。此外，如果您要在create.js.erb中使用@chat，则需要在create操作中对其进行定义。

def create
  @comment = Comment.new(creation_params)
  @comment.user_id = current_user.id
  @chat = # however you can define your @chat variable, if you decide you need it

  if @comment.save
    respond_to do |format|
      format.js {render layout: false, content_type: 'text/javascript'}
      format.html
    end
  else
    redirect_to root_path
  end
end

<强> create.js.erb

正如Topher Hunt所提到的，使用标签可能更好，这样新的评论就像旧格式一样用HTML格式化。另外，如果您的计划是附加刚创建的评论，则无需使用@chat.comments.last - 请改用@comment。我相信你不想附加整个Ruby对象（这是$("#comments").append("<%= @chat.comments.last %>");将要做的），而只是它的内容和创建者的名字。小心使js文件没有错误，否则整个过程都无法正常工作。

var markup = '<li id="comment-<%= @comment.id %>"><%= @comment.user.name %><%= @comment.content %></li>';
$("#comments").append(markup);
$('#comment_content').val('').focus();

评论div

这看起来很好。

<ul id="comments">
  <% @chat.comments.each do |comment| %>
    <li id="comment-<%= comment.id %>">
      <%= comment.user.name %>
      <%= comment.content %>
    </li>
  <% end %>
</ul>

Answer 2

你的第一次刺伤看起来很好。如果我正在接近这个问题（我之所以我在Rails中使用了很多ajax），我会尽可能地分别处理（并排除故障）每个问题。例如：

是否按预期调用并执行控制器操作？在代码周围撒上puts语句，并观察控制台输出以进行验证。
控制器是否呈现了您所期望的？ Chrome浏览器的开发人员窗口包含一个“网络”标签，可让您查看每个AJAX请求的路径，响应代码和加载时间，并单击任何请求以查看其完整正文 - 这意味着您可以使用它来检查确切的Javascript被发送回浏览器并由浏览器执行。
Javascript是否正常执行？请在alert("Done!");代码段末尾的create.js.erb中进行验证。

当我查看代码的细节时，我遇到的主要问题是＆＃34;字符串究竟附加到#comments？＆＃34; JS命令是

$("#comments").append("<%= @chat.comments.last %>");

但我希望您需要附加带有完整HTML标记的内容，而不仅仅是纯文本。所以我希望更像这样的东西（还要注意它分为两步以便于阅读）：

var markup = '<li><%= @chat.comments.last %></li>';
$('#comments').append(markup);

最后，到目前为止，我在Rails中的个人AJAX策略是忽略大多数Rails＆＃39; AJAX魔术和UJS。我几乎从不使用remote: true选项;相反，我编写自己的Jquery代码（预编译为资产管道的一部分）来检测点击，发送ajax请求，显示有关更改的反馈，以及其他任何内容。这样我的所有javascript都整齐地组织在/app/assets中，而不是分散在视图文件夹中，我的控制器返回JSON（有时是渲染的HTML部分），而不是在页面加载后添加额外的JS片段。对我来说感觉更干净，我感觉更能控制页面行为。

当然，这样做的一个主要缺点是我放弃了Rails＆＃39; UJS的支持;如果浏览器不支持Javascript，我写的任何功能都会失败而不优雅。

在表单提交后附加保存记录的div

2 个答案: