Javascript RubyonRails动态引导模式表

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

首先阅读文章底部的事件顺序

这就是我目前拥有的：

routes.rb

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

/报告/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>

/报告/_客户_按_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>

控制器/报告\u 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]按_status发送到reportscustomer_

reportscustomer_by_status方法运行where:cus_status_id语句以获取存储为@coatus的结果集

reportscustomer\u by\u status方法调用partial reports/\u customer\u by\u status.html.erb，以在div id=cus\u status\u表的模式内呈现

我认为我的做法是错误的，或者可能没有正确使用内置功能。。。我将有大约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>

<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>

---

下面是一个基本的大纲，说明如何完成你所追求的目标。我怀疑这段代码是否能开箱即用，但它有您需要的基本组件

首先，在控制器操作中渲染局部对象：

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);
    }
});

---

多亏了这些因素，我才不得不改变我的想法