javascript - 表单提交后附加带有已保存记录的 div

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 %>

Controller

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

创建.js.erb

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

评论区

<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"与 bool 值 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 %>

Controller

添加{render layout: false, content_type: 'text/javascript'}之后format.js 。另外，如果您要使用 @chat在create.js.erb中，您需要在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();

评论部分

这看起来很好。

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