Update a partial in rails with ajax

Question

I'm currently trying to create a simple drop-down list which takes a name and phone number, and then when you click on the selected option it updates anoher partial on the page with children objects of the selected option you have entered using Ajax.

ie if you choose User1 | 555-555-5555 User1 | 555-555-5555 from the drop-down menu, you should get back a list of all reportapprovals from User1 in the 2nd partial.

I know this is a simple question but I'm not quite sure how to write the JavaScript to make it work.

Here's my code for the drop-down list partial:

Drop Down View:

<select id="adminDropDown" onchange= "chooseManager();" class="form-control">
  <% if current_admin.manager_approvals.blank? %>
    <option>No Sub-Accounts added, Add one today!</option>
  <% elsif current_admin.manager_approvals.all? { |ma| ma.manager_approved == false }%>
    <option>No Sub-Accounts approved yet!</option>
  <% else %>
    <% current_admin.manager_approvals.where(manager_approved: true).each do |ma| %>
      <option value="<%= ma.id %>"><%= ma.manager_company %>&nbsp;|&nbsp;<%= number_to_phone(ma.manager_phone) %></option>
    <% end %>
  <% end %>
</select>

My controller looks like this...

class Admins::ReportapprovalsController < ApplicationController

  def index
    @reportapprovals = Reportapproval.all(table:params[:table], per_table: 4)
  end

  def show
    @reportapproval = Reportapproval.find(params[:id])
  end
end

2nd list partial...

report_list.html.erb
 ....
      <tbody>
        <% if @selected_manager_approval.reportapprovals.blank? %>
         <tr>
          <td width="100%">No reports available</td>
         </tr>
        <% else %>
          <% @selected_manager_approval.reportapprovals.each do |ra| %>
              <% if ra.report.present? %>
                <tr>
                    <td width="25%"><%= ra.tenant_last_name.truncate(17) %></td>
                    <td width="25%"><%= number_to_phone(ra.tenant_phone) %></td>
                    <td width="25%"><%= ra.date_approved %></td>
                    <td width="25%"><%= link_to "View Report", {:controller => "admins/reports", :action => "show", :id => ra.report_id}, :method => :get, class: "btn-default btn-sm" %></td>
                </tr>
              <% end %>
            <% end %>
    <% end %>
  </tbody>

My js file...

$(chooseManager() {
  $('#adminDropDown')change(chooseManager() {
    value = $(this).val()
    $.post("admins/reportapprovals/manager_select", {manager_id: value}, chooseManager(data) );
  })
})

UPDATE-This js file gives me this error

 SyntaxError: [stdin]:6:5: unexpected (

How do I select one of the drop-down menu options and the refresh the 2nd partial? Right now the selected value should pass the instance ID as "@selected_manager_approval" to the 2nd partial and then automatically refresh ONLY the 2nd partial on the page? How should I do this?

Answer 1

In your controller add an action like this:

class Admins::ReportapprovalsController < ApplicationController

  def index
    @reportapprovals = Reportapproval.all(table:params[:table], per_table: 4)
  end

  def show
    @reportapproval = Reportapproval.find(params[:id])
  end

  def manager_select
    @selected_manager_approval = ManagerApproval.find(params[:manager_approval_id])       
  end
end

In app/views/admins/report_approvals create manager_select.js.erb and add following code in that file.

// reportlist_wrapper_div_id is just an example you have to replace this with id of the div where you are rendering report_list partial.

$('#reportlist_wrapper_div_id').html('<%= escape_javascript render(:partial =>"report_list")%>');

Change your chooseManager function like this:

chooseManager = ->
  managerApprovalId = $(this).val()
  $.ajax
    type: 'POST'
    url: 'admins/reportapprovals/manager_select'
    data: manager_approval_id: managerApprovalId
  return