rails 中使用modal + ajax 比如在用户列表，增加一个冻结的功能。
在浏览器中的用户列表中增加解冻按钮：
点击冻结，弹出下拉窗，就是我们调用的modal.
1.首先在index页面中添加按钮（冻结，解冻）：
<% if user.is_enabled.blank? or user.is_enabled == "ture" %>
<%= link_to_modal freeze_users_path(:id => user.id), id: "freeze", class: 'btn btn-danger', title: "冻结" do %>
<%= t('freeze') %>
<% end %>
<% else%>
<%= link_to t('defreeze'), defreeze_users_path(:id => user.id), method: :post, class: 'btn btn-primary',
data: { confirm: "确定要解冻该用户么?"} %>
<% end %>
2.controller的对应的action：
3.设置对应的route路由中。
4.1 重点来了 ，需要调用modal了.首先在gemfile 中添加gem :
gem 'bootstrap-modal-rails', '2.2.5'
4.2 在application.js 中添加:
//= require bootstrap-modal
//= require bootstrap-modalmanager
$(document).on('click', '[data-toggle=modal-ajax]', function(e) {
e.preventDefault();
e.stopPropagation();
console.info();
$('#modal-ajax').empty().modal().modal('loading');
$.rails.handleRemote($(this));
return false;
});
$(document).on('ajax:beforeSend', '.modal form[data-remote]', function(e) {
return $(this).parents('.modal').modal('loading');
});
4.3 application.css中添加：
*= require bootstrap-modal *= require bootstrap-modal-bs3patch
4.4 helpers/application_helper.rb中添加：
def link_to_modal(name, options = nil, html_options = nil, &block)
default_options = { data: { toggle: 'modal-ajax', target: '#modal-ajax' } }
if block_given?
link_to(name, default_options.update(options), html_options, &block)
else
link_to(name, options, default_options.update(html_options))
end
end
def modal_header(title)
%(<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>#{title}</h3>
</div>).html_safe
end
def modal_footer(&block)
%(<div class="modal-footer">
#{capture(&block)}
<button type="button" data-dismiss="modal" class="btn">#{t("cancel")}</button>
</div>).html_safe
end
4.5 layouts/application.html.rb中添加：
<!-- 全局弹出层 -->
<div id="modal-ajax" class="modal hide fade" tabindex="-1"></div>
4.6 在视图层添加 view/users/freeze.js.erb:
$('#modal-ajax').html('<%= j(render 'freeze') %>');
$('#modal-ajax').modal();
$("#modal-ajax").removeClass("hide");
4.7 在视图层添加 view/users/_freeze.html.erb, 在freeze.js.erb中render会渲染这个视图
<%= modal_header t("freeze_user") %> <%= form_for @user, url: freeze_reason_users_path, :html => { method: 'post'} do |f| %>