Ruby 上 Rails 动态 Bootstrap 模态 Table

Question

我正在制作一个带有一堆按钮的报告页面！我希望每个按钮都启动自己的模式，该模式有一个下拉框（完成）。更改下拉框后，我希望模式显示数据库中的数据。我正在使用 Rails 4 和 postgres。

首先阅读post底部的事件顺序！

这是我目前拥有的：

routes.rb

get 'reports' => 'reports#index'
get 'reports/customer_by_status' => 'reports#customer_by_status'

/reports/index.html.erb

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#customer_by_status">Customer by Status</button>


<div id="customer_by_status" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Customer by Status</h4>
      </div>
      <div class="modal-body">
        <%= select_tag "cus_status_id", options_from_collection_for_select(@customer_statuses, 'id','customer_status_desc', {:selected => "#{params[:cus_status_id] if params[:cus_status_id].present?}"}), :prompt => "Select Status" %>
        <br><br>
        <div id="cus_status_table">

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>

</div>

<script>
    $(document).ready(function(){

        $('#cus_status_id').change(function(){
            id_passed = $(this).val();
            $.ajax({
                url:"/reports/customer_by_status",
                type: "GET",
                data: {"cus_status_id" : id_passed}
            });
            $("#cus_status_table").html("<%= escape_javascript(render :partial => 'customer_by_status', locals: {@coatus => @coatus}) %>");
        });


    })
</script>

/reports/_customer_by_status.html.erb

<table>
    <thead>
    <tr>
      <th>Customer Name</th>
      <th>Phone Number</th>
      <%= debug(@coatus) %>
    </tr>
  </thead>
  <tbody>

  <% @coatus.each do |c| %>
      <tr>
        <td><%= c.full_name %></td>
        <td><%= c.primaryphone%></td>
      </tr>

  <% end %>
  </tbody>


</table>

controllers/reports_controller.rb

class ReportsController < ApplicationController
before_action :customer_by_status



def index
  @customers = Customer.all
  @customer_statuses = CustomerStatus.all
end

def customer_by_status

  #@customers_with_status = Customer.joins(:customer_status).where("customer_status.id =?", params[:customer_status_id])

  @coatus = Customer.where(:customer_status_id => params[:cus_status_id])

  Rails.logger.debug(@coatus)
      #Customer.joins(:customer_status).where(:customer_status.customer_status_desc => "Inactive")
end




end

我认为应该发生的事件顺序：

用户点击按钮

模态框出现下拉菜单

用户从下拉列表中选择一个选项

Ajax 将选定的选项 id 作为参数[:cus_status_id]

发送到 reports#customer_by_status

reports#customer_by_status 方法运行一个 where(:cus_status_id) 语句来获取存储为 @coatus

的结果集

reports#customer_by_status 方法调用部分 reports/_customer_by_status.html.erb 以在模态内部呈现 div id="cus_status_table"

我想我处理这个错误或者可能没有正确使用内置功能...我将有大约 20 个按钮来启动不同的报告所以我只想有一个模式并发送不同的变量到它取决于按下哪个按钮。

编辑：回答 将脚本更改为：

<script>
    $(document).ready(function(){
        $('#cus_status_id').change(function(){
            id_passed = $(this).val();
            $.ajax({
                url:"/reports/customer_by_status",
                type: "GET",
                dataType: 'html',
                data: {"cus_status_id" : id_passed},
                success: function(response) {
                    $("#cus_status_table").html(response);
                }
            });
        })
    });
</script>

Answer 1

这里是完成您所追求的目标的基本方法。我怀疑这段代码是否可以开箱即用，但它具有您需要的基本组件。

首先，在您的控制器操作中渲染部分：

def customer_by_status
  @coatus = Customer.where(:customer_status_id => params[:cus_status_id])

  render "/reports/_customer_by_status",   
         :content_type => 'text/html',
         layout: false
end

然后，在您的 ajax 请求中获取渲染的部分并将其弹出到正确的位置：

$.ajax({
    url:"/reports/customer_by_status",
    type: "GET",
    dataType: 'html',
    data: {"cus_status_id" : id_passed},
    success: function(response) {
      $("#cus_status_table").html(response);
    }
});

Answer 2

感谢元素，我只需要更改我的 <script>

<script>
    $(document).ready(function(){
        $('#cus_status_id').change(function(){
            id_passed = $(this).val();
            $.ajax({
                url:"/reports/customer_by_status",
                type: "GET",
                dataType: 'html',
                data: {"cus_status_id" : id_passed},
                success: function(response) {
                    $("#cus_status_table").html(response);
                }
            });
        })
    });
</script>

Ruby 上 Rails 动态 Bootstrap 模态 Table

Ruby on Rails Dynamic Bootstrap Modal Table

javascript

ajax

jquery

ruby-on-rails

modal-dialog