利用bootstrap的data-toggle

嵌入页面

页面可能添加一些弹出界面，但是不常用，页面可以先不渲染，我们可以利用bootstrap的toggle方法，加上jquery的replaceWith进行页面替换

1 目标页面
  (1) <a data-target="#subModal" data-toggle="modal" id="edit_trigger"></a>
      (或者直接换成一个button，主页面点击的时候，也可以起到效果 . <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#subModal">Large modal</button>)
  (2) 预留一个空的div（此处就是不用提前渲染内容位置）
    <div id="vehicleModal">
    </div>
    
2 任意局部页面
  （1） <%= link_to "添加车辆", "javascript:void(0);", :class => 'btn btn-primary', onclick: "edit_vehicle(0, #{@customer.id});" %>
  
   (2) js代码
      
        function edit_vehicle(vehicle_id, customer__id){
            $.ajax({
                cache : false,
                type : "get",
                url : "/admin/customer_vehicles/edit_vehicle/" + vehicle_id + "/" + customer__id,
                error : function(request) {
                },
                success : function(data) {
                    $("#vehicleModal").replaceWith(data);  
                    $("#edit_trigger").trigger("click");
                }
            });
        }
        
        url 返回一个页面,即data是一个页面,如下
    
          <div class="modal fade" id="subModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
               </div>
            </duiv>
          </div>
        
        目标页面的 #vehicleModal 元素被替换(replaceWith(data))
        目标元素的 #edit_trigger 被点击(trigger("click")) 成功显示