jquery - 当 Controller 调用 format.js 时，模态框无法正确关闭

Question

我有一个模式，它作为对象的编辑表单弹出。它可以很好地打开并与 Controller 通信，但是当操作完成时，模式不会关闭。

当 Controller 呈现新页面时，一切正常，但是当表单(位于模式中)设置为remote: true时，我遇到了问题。

所以模态代码类似于 -

boilerplate bootstrap modal markup
id='edit_stream_4'
form_for(@stream, remote: true) do |f|
...etc...
f.submit

...在我的 Controller 中

def update
  respond_to do |format|
    if @stream.update
      format.js
    ...etc...

...以及/streams/update.js.erb

$('#edit_stream_4').modal("hide");
$('#workspace').html("<%= escape_javascript(render :partial => 'streams/show', stream: @stream) %>");

当我点击模式中表单中的更新按钮时，记录会更新，并且我可以在后台看到部分重新渲染，但模式仍然保持不变。

我想这是因为当我进入 Controller 时我离开了模态 js，并且我放入 update.js.erb 中的 js 有点垃圾并且没有做我想要的事情？

任何人都可以给我一些关于如何让我的 JavaScript 实现我想要的功能的建议吗？

感谢您的任何建议。我想我真正想要的是关于处理我认为 Bootstrap 与模态所做的事情之间的冲突的建议[=单击链接以触发模态，当您退出模态 jQuery 关闭它时] 和什么Rails 正在使用 ajax [= 模态循环的一部分，使用 ajax 在页面上其他地方触发 div 上的部分] - 因为我认为通过使用 Rails ajax 生成我没有正确退出模态。

无论如何，上面的代码片段都是按原样呈现的，因为我不想将问题与应用程序的其他细节混淆 - 但为了回应我收到的评论，我在下面包含了完整的代码.

该应用程序是我在单页待办事项上的学习尝试。视口(viewport)分为两部分 - 上半部分是工作流列表，下半部分是与流相关的任务列表。这些任务呈现为部分任务，由用户单击上半部分的流链接触发。

所以我的主页是=

container.html.erb

<div id='viewport'>
  <div class='row'>
    <div class='col-md-4'>
      <%= render 'streams/index', streams: @streams %>
    </div>
    <div class='col-md-4'>
      <%= render 'layouts/object_views/index_settings', settings: @settings %>
    </div>
    <div class='col-md-4'>
      <%= render 'layouts/tips' %>
    </div>
  </div>
  <div class='row' id='workspace'>
    <%= render 'layouts/workspace/workspace' %>
  </div>
</div>

当页面首次加载时，“layouts/workspace/workspace”部分仅包含一个图像:

/layouts/workspace/_workspace.html.erb

<div id='workspace'>
    <%= image_tag("WIN1.png", class:'center-block img-responsive') %>
</div>

流索引包含带有一些链接的工作流列表=

/streams/_index.html.erb

  <table class='table'>
    <thead>
      <tr>
        <th>Streams</th>
      </tr>
    </thead>
    <tbody>
      <% streams.each do |stream| %>
        <tr>
          <td><strong><%= link_to "#{stream.name}", stream, remote: true %></strong></td>
          <td><%= render 'layouts/components/object_modal', modal_params: {modal_action: :edit, modal_object_class: :stream, modal_object_id: stream.id} %></td>
        </tr>
      <% end %>
      <tr>
        <td>
          <%= render 'layouts/components/object_modal', modal_params: {modal_action: :new, modal_object_class: :stream} %>
        </td>
      </tr>
    </tbody>
  </table>

...您可以看到这个部分做了几件事:它迭代 @streams，并且为每个流提供一个链接，该链接会触发 Controller 上的操作以显示部分 - <%= link_to "#{stream.name}", stream, remote: true %> ，并将参数传递给通用模态:<%= render 'layouts/components/object_modal', modal_params: {modal_action: :edit, modal_object_class: :stream, modal_object_id: stream.id} %> .

模态如下所示:

布局/组件/_object_modal.html.erb

<a href="#" data-toggle="modal" data-target=<%=modal_data_target(modal_params)%>>
  <span><%=modal_params[:modal_alt_title] || "#{modal_params[:modal_action]} #{modal_params[:modal_object_class]}"%></span>
</a>

<div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id=<%=modal_id(modal_params)%>>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"><%=modal_title(modal_params)%></h4>
      </div>
      <div class="modal-body">
        <%= render partial: "#{modal_params[:modal_object_class]}s/#{modal_params[:modal_action]}", locals: {id: modal_params[:modal_object_id], parent_id: modal_params[:parent_id]} %>
      </div>
    </div>
  </div>
</div>

这一切所做的就是调用几个助手来插入正确的 id 等，然后使用模态主体中的实际形式调用部分: <%= render partial: "#{modal_params[:modal_object_class]}s/#{modal_params[:modal_action]}", locals: {id: modal_params[:modal_object_id], parent_id: modal_params[:parent_id]} %> .

此部分解包确定类、操作和对象 ID 的参数，并调用适当的表单和操作。这样做有一个很好的理由 - 它将允许用户以多种不同的方式对任务进行分组，这也是练习的重点。因此，如果您在流类上调用编辑方法，您将得到以下形式:

streams/_edit.html.erb

<%= bootstrap_form_for(stream = Stream.find_by_id(id), remote: true) do |f| %>
  <% if stream.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(stream.errors.count, "error") %> prohibited this stream from being saved:</h2>

      <ul>
      <% stream.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>
<%= button_to 'Delete Stream', stream_path(stream), method: :delete, class: 'btn btn-danger', data: { confirm: "Are you sure?" }  %>

... Controller 中的这个:

  def edit
  end

  def update
    respond_to do |format|
      if @stream.update(stream_params)
        # format.html { redirect_to whatisnext_path, notice: 'Stream was successfully updated.' }
        # format.json { render :show, status: :ok, location: @stream }
        format.js
      else
        format.html { render :edit }
        format.json { render json: @stream.errors, status: :unprocessable_entity }
      end
    end
  end

...触发以下js -

streams/update.js.erb

$('#viewport').html("<%= escape_javascript(render 'whatisnext_signed_in_dynamic' %>");

...目的是我们离开模式并返回主视图。在用户单击提交按钮之前，一切都发生得很好 - 对象已更新并将更改保存到数据库中，但问题是模式只是挂起。

所以问题是 - 如何让 Rails ajax 和 bootstrap jQuery 很好地发挥作用，以便模式按其应有的方式关闭？

Answer 1

我在编辑功能上使用模式时也遇到了类似的问题，我的更新可以工作，但模型无法正确关闭，留下黑色透明页面。就我而言，在 update.js.erb 中添加以下内容解决了问题。

$(".modal-backdrop").remove();