如何强制对模态进行新渲染

How do I force the fresh render of a modal?

本文关键字:新渲染 模态 何强制      更新时间:2023-09-26

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

这是我的模式:

<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>

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

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

代码如下:

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

将此javascript添加到您的页面:

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

用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的模态,并隐藏其余模态。对模态进行迭代,并使用<button>中的data-id与每个模态的data-id进行比较,以确定应隐藏哪些模态,应显示哪些模态。

如果您想了解如何实现触发器函数,请使用触发器函数的当前代码更新问题