欢迎来到cool的博客
7

Music box

Click to Start

点击头像播放音乐
新博客链接

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">&times;</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| %> <%= modal_footer do %> <%= f.submit t('global.submit'), class: 'btn btn-primary'%> <% end %> <% end %>

返回列表