javascript - Ruby on Rails 动态引导模态表

Question

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

首先阅读帖子底部的事件序列!

这是我目前拥有的:

路线.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>

Controller /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 作为 params[: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

多亏了元素，我只需要更改我的 <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>