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

以下是调用partials的整个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

你需要在关闭后销毁每个模态窗口。在我的一个项目中，我使用bootstrap为CRUD操作渲染自定义模型。

代码如下所示：

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

Answer 2

将此javascript添加到您的页面：

(function() {
   //Destroy previously initialized boostrap modal ( it cache html )
   $('body').on('hidden.bs.modal', '.modal', function () {
   $(this).removeData('bs.modal');
  });
});

Answer 3

使用Ruby变量强制渲染模态并不是最实用的方法，因为它需要的修改比我在一个问题中可以帮助的更多。为了快速修复，我建议为每个节点渲染一个模态，并用你的触发函数隐藏/显示相应的模态。

更改模式的第一行，以包含node.id

的数据属性

<div class="modal tagging fade" data-id="<%= node.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

为每个节点渲染模态，并显示此效果。（您的代码可能使用不同的部分名称，但我希望您能获得要点。）

<% @nodes.each do |node| %>
  <%= render partial: 'nodes/modal', locals: { node: node }
<% end %>

将node.id添加到按钮触发器

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

设定触发功能以显示所需的node.id模态并隐藏其余部分。迭代模态并使用data-id中的<button>与每个模态的data-id进行比较，以确定应隐藏哪些模态以及应显示哪些模态。

如果您想了解如何实施触发功能，请使用当前触发功能代码更新问题。

如何强制模态的新渲染？

3 个答案: