Question

我有一个填充了数据的表，其中每行都有一个编辑按钮。编辑后，将出现一个引导模式弹出窗体，其中表行数据现在可以编辑。此弹出窗体具有提交按钮和关闭按钮。关闭按钮按预期工作（关闭模式弹出窗口），提交按钮确实更新我的数据，但不会关闭窗体。

简而言之，我正确地显示了模式弹出窗口，弹出窗口上的提交按钮实际上有效，但是在数据更新后我无法让窗体关闭。

以下是相关部分......

index.html.erb

<tbody class="majors-index">
    <!-- This renders my table with all the data and edit buttons -->
    <%= render 'index' %>
</tbody>
....
....
<div class="modal" id="major-modal">
</div>
....

_index.html.erb

....
<!-- This opens the modal dialogue -->
<%= link_to "Edit", edit_major_path(m), remote: true, class: "btn btn-primary", data: {toggle: 'modal', target: "#major-modal"} %>
....

edit.js.erb

// display the modal form
$("#major-modal").html("<%= escape_javascript(render partial: "majors/edit") %>")
$("#major-modal").modal("toggle")

_edit.html.erb

<!-- #modal-without-animation -->
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <h4><%= "Editing #{@major.name}" %></h4>
    </div>
    <%= render "form"%>
  </div>
</div>

_form.html.erb

<%= form_for @major, remote: true, html: {class: "form-horizontal", style: "display-inline;"} do |f| %>
    <div class="modal-body">
    ....
    ....
    <%= f.submit "Modify", class: "btn btn-primary", id: "btnSubmit" %>
    <%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %>
    ....
    </div>
<% end %>

现在，在点击提交时，第一个被调用的东西是我的update.js.erb，它应该关闭我的模态形式。

update.js.erb

$("#major-modal").html("<%= escape_javascript(render partial: "majors/edit") %>")
$("#major-modal").modal("toggle")

但无论出于何种原因，模态形式都不会关闭。我试过将“toggle”切换为“hide”，但这也没有效果。我知道update.js.erb正在被调用，因为如果我只是在那里粘贴警报，它就会被触发。

我做错了什么？为什么模态形式不会接近？

更新：

这是我的控制器......

def update
    @majors = Major.all
    @major = Major.find(params[:id])
    @major.update_attributes(major_params)

    respond_to do |format|
      format.js
    end
  end

Answer 1

好的，所以在呈现页面之后。当动态添加新元素时，它不一定会被添加到DOM中以便于jquery选择。它无法关闭不存在的元素。

您可以使用委托事件解决此问题：

$('#btnSubmit').on('submit', '#major-modal', function() {
    $(this).modal('hide');
});

这假设您将它放入文档就绪子句中，如下所示：

$(document).ready(
$('#btnSubmit').on('submit', '#major-modal', function () {
    $(this).modal('hide');
}));

Bootstrap模态表格不会关闭

1 个答案: