如何强制对模态进行新渲染
How do I force the fresh render of a modal?
我有一个在第一个页面加载时生成的模态,但因为该模态是为页面上的每个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">×</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"> </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
进行比较,以确定应隐藏哪些模态,应显示哪些模态。
如果您想了解如何实现触发器函数,请使用触发器函数的当前代码更新问题
- 如何强制对模态进行新渲染
- 显示模态对话;在 IE 中打开一个新窗口
- 从以前的模态启动新的模态
- 在选择(rails_admin)时更改时在模态窗口中添加新字段
- Rails4 + Bootstrap3 - 模态渲染但不会显示
- 如何在 .js.erb 文件中执行模态的 js 渲染
- 将表单提交到新选项卡并关闭模态
- 在每个show()上创建新的模态对话框
- 重定向的页面是't提交模态表格后进行渲染
- 如何打开一个新的模态窗口来关闭simplemode的当前使用
- 在React中渲染一个模态
- 关闭一个模态,然后用一个按钮打开一个新的模态
- Rails偏模态(渲染不同模型的偏模)
- 如何将.aspx页面渲染成MVC中的模态
- Angular Modal Service如何在Modal popup中编写函数.如何在模态弹出框中传递一个新的控制器函
- 如何启用超链接打开模态对话框,同时也允许在同一链接上的新选项卡中打开
- 在Html的模态中渲染部分视图.ActionLink点击
- 我如何在渲染模板和隐藏模态后重置表单
- 在javaScript中关闭模态后不添加表中的新行
- 当按钮被点击时关闭模态表单并打开一个新的模态表单