title: Ruby on Rails Dynamic Bootstrap Modal Table
body: <p>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. </p>
  
  <p>Read the <strong>Sequence of Events</strong> at the bottom of the post first!</p>
  
  <p>This is what I currently have:</p>
  
  <p>routes.rb</p>
  
  <pre><code>get 'reports' =&gt; 'reports#index'
  get 'reports/customer_by_status' =&gt; 'reports#customer_by_status'
  </code></pre>
  
  <p>/reports/index.html.erb</p>
  
  <pre><code>&lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#customer_by_status"&gt;Customer by Status&lt;/button&gt;
  
  
  &lt;div id="customer_by_status" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
  
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Customer by Status&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;%= select_tag "cus_status_id", options_from_collection_for_select(@customer_statuses, 'id','customer_status_desc', {:selected =&gt; "#{params[:cus_status_id] if params[:cus_status_id].present?}"}), :prompt =&gt; "Select Status" %&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;div id="cus_status_table"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
      $(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("&lt;%= escape_javascript(render :partial =&gt; 'customer_by_status', locals: {@coatus =&gt; @coatus}) %&gt;");
          });
  
  
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>/reports/_customer_by_status.html.erb</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Customer Name&lt;/th&gt;
        &lt;th&gt;Phone Number&lt;/th&gt;
        &lt;%= debug(@coatus) %&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
  
    &lt;% @coatus.each do |c| %&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;%= c.full_name %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= c.primaryphone%&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
    &lt;% end %&gt;
    &lt;/tbody&gt;
  
  
  &lt;/table&gt;
  </code></pre>
  
  <p>controllers/reports_controller.rb</p>
  
  <pre><code>class ReportsController &lt; 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 =&gt; params[:cus_status_id])
  
    Rails.logger.debug(@coatus)
        #Customer.joins(:customer_status).where(:customer_status.customer_status_desc =&gt; "Inactive")
  end
  
  
  
  
  end
  </code></pre>
  
  <p><strong>Sequence of Events</strong> that I think should happen: </p>
  
  <p>User clicks Button</p>
  
  <p>Modal appears with drop down</p>
  
  <p>User selects an option from the drop down</p>
  
  <p>Ajax sends the selected options id to reports#customer_by_status as params[:cus_status_id]</p>
  
  <p>reports#customer_by_status method runs a where(:cus_status_id) statement to get a result set stored as @coatus</p>
  
  <p>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"</p>
  
  <p>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.</p>
  
  <p><strong>EDIT: Answer</strong>
  changed script to:</p>
  
  <pre><code>&lt;script&gt;
      $(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);
                  }
              });
          })
      });
  &lt;/script&gt;
  </code></pre>