Rails + Bootstrap + AJAX：提交后表单停止显示的模式

Question

我有一个模型的索引视图（显示所有记录），我使用引导程序和 ajax 在索引视图中进行更新。为此，我在每一行的末尾添加了一个链接，单击该链接后，将显示一个带有记录属性的表单的模式。我提交表单，并使用 ajax 更新数据库，然后更新视图（仅更改的行）。

它第一次工作正常，但如果我尝试再次编辑同一行，模式停止显示，单击什么也不做，甚至没有错误消息。不过，它仍然适用于其他行。

如果我从 update.js.erb 中删除渲染（参见下面的代码），它每次都可以工作，但是我需要刷新整个页面（每次更改后）以显示更新更改。

代码保持完全相同（或者看起来如此），但我需要刷新页面以使其在更新的行上再次工作。

这是我的代码：

controler（删除不相关的代码）

before_action :set_status, only: [:edit, :update]

def edit
end

def update
  @status.update(status_params)
  respond_to :js
end

private

def set_status
  @status = Status.find(params[:id])
end

索引视图

<div class="container contentaftermenu">
  <div class="row">
    <table class="table">
      <thead class="table-head">
        <tr>
          <th class="centered">Sequence</th>
          <th>Title</th>
          <th>Description</th>
          <th class="centered">Edit</th>
        </tr>
      </thead>
      <tbody>
        <% @statuses.each do |status| %>
          <tr class="record-tr" id="status-<%= status.id %>">
            <%= render partial: "display", locals: { status: status } %>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
<div id="status-modal" tabindex="-1" role="dialog" class="modal fade"></div>

<script type="text/javascript">
$(document).ready(function () {

  $('img.bottom').click(function() {
    $('#status-modal').modal("show");
  });
});
</script>

显示部分

<td class="centered"><%= status.sequence %></td>
<td id="title-<%= status.id %>"><%= status.title %></td>
<td id="desc-<%= status.id %>"><%= status.description %></td>
<td id="act-<%= status.id %>" class="centered">
  <%= link_to edit_admin_status_path(status), remote: true do %>
    <img id="sid-<%= status.id %>" class="bottom" src="../../images/admin/edit.png">
  <% end %>
</td>

编辑 js

$("#status-modal").html("<%= j(render 'form') %>");

形成部分

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3 class="modal-title">Edit status</h3>
    </div>
    <%= form_for @status, url: admin_status_path(@status), remote: true do |f|   %>
      <div class="modal-body form-group form-admin">
        <ul class="errors alert-danger"></ul>

        <div class="form-group">
          <%= f.label :title, class:"control-label" %>
          <%= f.text_field :title, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :description, class: "control-label" %>
          <%= f.text_area :description, class: "form-control" %>
        </div>

        <%= f.submit class: "btn btn-primary" %>
        <%= link_to "Cancel", "#", class: "btn", data: { dismiss: "modal" } %>
      </div>
    <% end %>
  </div>
</div>

更新 js

$("ul.errors").html("");
$("ul.errors").removeClass("alert");

<% if @status.errors.any? %>
  $("ul.errors").addClass("alert");

  <% @status.errors.full_messages.each do |message| %>
    $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
  <% end %>
<% else %>
  $("#status-<%= @status.id %>").html("<%= j(render partial: 'display', locals: { status: @status }) %>");
  $("#status-modal").modal("hide");
<% end %>

感谢您的帮助！

Answer 1

我认为问题在于您正在用您的 edit.js 替换模态框内的所有 html，这意味着 JS 模态对象不再存在，因此您显示模态的点击功能无法再找到模态对象。

您能否尝试仅替换具有表单的模态部分，这应该可以解决您的问题。

即只为这一点做一个部分（我给它一个“inner_form”的id）：

<%= form_for @status, url: admin_status_path(@status), remote: true, id:"inner_form" do |f|   %>
  <div class="modal-body form-group form-admin">
    <ul class="errors alert-danger"></ul>

    <div class="form-group">
      <%= f.label :title, class:"control-label" %>
      <%= f.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :description, class: "control-label" %>
      <%= f.text_area :description, class: "form-control" %>
    </div>

    <%= f.submit class: "btn btn-primary" %>
    <%= link_to "Cancel", "#", class: "btn", data: { dismiss: "modal" } %>
  </div>
<% end %>

然后在你的edit.js中替换它：

$("#inner_form").html("<%= j(render 'inner_form') %>");