Ruby on Rails Dynamic Bootstrap Modal Table

Question

I am making a Reports page with a bunch of buttons! I want each button to launch its own modal that has a drop down box(done). When the drop down box is changed I want the modal to show data from the database. I am using Rails 4 with postgres.

Read the Sequence of Events at the bottom of the post first!

This is what I currently have:

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

Sequence of Events that I think should happen:

User clicks Button

Modal appears with drop down

User selects an option from the drop down

Ajax sends the selected options id to reports#customer_by_status as params[:cus_status_id]

reports#customer_by_status method runs a where(:cus_status_id) statement to get a result set stored as @coatus

reports#customer_by_status method calls partial reports/_customer_by_status.html.erb to render inside of the modal where the div id="cus_status_table"

I think I am approaching this wrong or perhaps am not using built in features correctly... I am going to have around 20 buttons to launch different reports so I would like to only have one modal and send different variables to it depending upon which button was pressed.

EDIT: Answer changed script to:

<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

Thanks to elements I just had to change my <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>

Answer 2

Here's a basic outline of a way to accomplish what you're after. I doubt this code will work out of the box, but it has the basic components you need.

First, render the partial in your controller action:

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

Then, grab the rendered partial in your ajax request and pop it in the right place:

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