javascript - 我如何强制重新渲染模态？

Question

我有一个在第一个页面加载时生成的模式，但是因为这个模式是为页面上的每个 node 呈现的，所以它总是有错误的 node 值因为模态总是陈旧的。即如果呈现的 HTML 在完成页面加载时具有 node.id=7，它将始终在 node.id=7 上工作，即使您希望它为 呈现>node.id=6.

这是我的模式:

<div class="modal tagging fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Tag User</h4>
      </div>
      <div class="modal-body">
        <%=s imple_form_for node, url: add_tagged_user_node_path(node), method: :post do |f| %>
          <%=f .error_notification %>

            <div class="form-inputs">
              <%=f .association :user, label: "Users", collection: @users, as: :check_boxes, checked: node.user_tags %>
            </div>

            <div class="form-actions">
              <%=f .button :submit %>
            </div>
            <% end %>
      </div>
    </div>
  </div>
</div>

这是该模式的触发器:

  <a class="plus" href="javascript:;" data-toggle="modal" data-target="#myModal">&nbsp;</a>

我想做的是每当按下触发器时，它基本上都会为该模态执行一个新的页面请求 - 然后用正确的 node.id 填充模态。

如何在按下按钮时强制刷新？

编辑 1

这是从中调用部分的整个 index.html.erb:

      <% @nodes.each do |node| %>
            <!-- Upload Video Comment Popup -->
            <%= render partial: "shared/upload", locals: {node: node} %>

      <div class="box">
          <%= render partial: "nodes/box", locals: {node: node} %>
          <%= render partial: "nodes/comments", locals: {node: node} %>                         
      </div>
      <% end %> <!-- node -->

这是 nodes/box 部分，其中包含我们感兴趣的调用:

<!-- Author -->
              <div class="author clearfix">
                  <a class="avatar" href="#">
                    <%= image_tag node.user.avatar.url, size: "48x48", :class => "header img-circle" %>
                  </a>
                  <h5 class="name"><%= node.user.name %></h5>
                  <p class="date"><%= node.created_at.strftime("%Y/%m/%d") %>
                                        <span class="video-title-controls"><a href="#"><i class='fa fa-trash-o fa-lg pull-right'></i></a></span>
                                    </p>
              </div>
              <!-- Video -->
              <div class="video clearfix">
                  <% if node.is_video? %>
                      <%= raw yt_client.my_video(node.media.yt_video_id).embed_html5({:width => '280', :height => '300'}) %>
                  <% end %>
              </div>
              <!-- Titles -->
              <div class="titles clearfix">
                                <% if can? :manage, node %>
                  <h5><%= best_in_place node, :name, as: :input, activator: "#edit-node-title-#{node.id}" %> <%= link_to "<i class='fa fa-pencil'></i>".html_safe, "#", id: "edit-node-title-#{node.id}" %></h5> 
                  <p><%= best_in_place node.media, :description, as: :input, activator: "#edit-node-desc-#{node.id}" %> <%= link_to "<i class='fa fa-pencil'></i>".html_safe, "#", id: "edit-node-desc-#{node.id}" %></p>
                                    <p><%= link_to "See video here", node_path(node) %></p>
                                    <% else %>
                  <h5><%= node.name %></h5> 
                  <p><%= node.media.description %></p>
                                    <% end %>                                       
              </div>
              <!-- Tags -->
              <div class="tags bootstrap-styles clearfix">

                                <% if controller_name == "nodes" %>
                                <p>
                                      <button type="button" data-toggle="modal" data-target="#TagUsersModal">Tag Users</button>
                                </p>
                                <% end %>

                                    <% if node.tagged_users.empty? %>
                  <p class="tagged">In this video:</p>
                  <ul>
                    <li><%= link_to image_tag(node.user.avatar.url, size: "48x48", :class => "img-circle") , node.user %></li>
                  </ul>
                                    <% else %>
                  <p class="tagged">In this video:</p>              
                  <ul>
                    <% node.tagged_users.each do |tagged_user| %>
                                            <!-- <li><%#= link_to image_tag(tagged_user.avatar.url, size: "48x48", :class => "img-circle"), tagged_user %></li> -->
                                            <li><p><%= link_to tagged_user.email, tagged_user %></p></li>                                           
                                        <% end -%>
                  </ul>
                                    <% end %>
              </div>

触发此模式的行是:

<button type="button" data-toggle="modal" data-target="#TagUsersModal">Tag Users</button>

然后它会触发问题顶部的模态。

Answer 1

您需要在关闭后销毁每个模态窗口。在我的一个项目中，我使用 bootsrap 为 CRUD 操作呈现自定义模式。

代码如下所示:

$(document).on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal'); 
});