Question

在提交表单后尝试使用ajax更新DIV。

我的部分_inline.html.erb是

<div class="large-12 columns" id="inline_posts">
<% @posts.each do |post| %>
  <div class="row">
    <div class="large-10 columns left"><%= post.content %></div>
    <div class="large-2 columns right"><%= link_to 'Remove', post, method: :delete,  class: 'tiny button' %></div>
  </div>
<% end %>
</div>

我的js.erb是

$('#inline_posts').html("<%= j render 'posts/inline' %>");
$('#new_post').html("<%= j render 'posts/form' %>");

重新呈现表单很好。表格被重新绘制，就好像是新的一样。

DIV的渲染是个问题。它呈现新的DIV而不是旧的DIV。为什么它不替换现有的DIV，就像它取代现有的表格一样？

通过AJAX更新的DIV看起来像

<div class="large-12 columns" id="inline_posts">
  <div class="large-12 columns" id="inline_posts">

在旧版本中添加新版本。

编辑：

表单HTML

<div class="large-12 columns"> <--- Note this has no id specified
        <form accept-charset="UTF-8" action="/posts" class="new_post" data-remote="true" id="new_post" method="post">
<div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /></div>
  <div class="row">
  <div class="large-12 columns">
    <label for="post_Post a message">Post a message</label>
  </div>
  </div>
  <div class="row">
  <div class="large-10 columns">
    <textarea class="form-control" id="post_content" name="post[content]">
</textarea>
  </div>

  <div class="large-2 columns">
    <input class="button" name="commit" type="submit" value="Post" />
  </div>
  </div>
</form>
</div>

表单部分帖子/ _form.html.erb（这会创建一个ID为“new_post”的表单）

<%= form_for(@post, remote: true) do |f| %>
  <div class="row">
  <div class="large-12 columns">
    <%= f.label 'Post a message' %>
  </div>
  </div>
  <div class="row">
  <div class="large-10 columns">
    <%= f.text_area :content, class: 'form-control' %>
  </div>

  <div class="large-2 columns">
    <%= f.submit  'Post', class: 'button' %>
  </div>
  </div>
<% end %>

Answer 1

.html只是.innerhtml的优雅包装器，因此posts/inline呈现的内容将放在inline_posts div标记内

您可能想尝试replaceWith()

$('#inline_posts').replaceWith("<%= j render 'posts/inline' %>");

如果您希望将该元素#inline_posts替换为posts/inline

所呈现的内容

编辑：

致电时，$('#inline_posts').html("<%= j render 'posts/inline' %>");

您基本上是使用posts/inline模板文件中的html并将其放在inline_posts div中，如下所示：

<div class="large-12 columns" id="inline_posts">INSERTING posts/inline HTML HERE</div>

您的posts/inline模板文件必须从<div class="large-12 columns" id="inline_posts">开始，否则您将无法获得所获得的结果。

它适用于您的表单，因为您的posts/form模板文件不以<form id="new_posts">开头，因此，您的帖子文件中的html会在该元素内呈现，如下所示：

<form id="new_posts">INSERTING posts/form HTML HERE</form>

form#new_posts不是模板文件的一部分，其中div#inline_posts必须是其各自模板文件的一部分。这就是为什么你要与一个而不是另一个嵌套的原因。

我希望这是有道理的。

Rails / Ajax没有替换DIV而是在旧DIV中嵌套新的DIV

1 个答案: