Yousef Yousef - 2 months ago 17
Ajax Question

Ruby on Rails select2 AJAX/JQuery - passing a parameter to controller not working

I'm trying to make a Job descriptions (JD) page to compare between a choose JDs.
My main page will have a field to select some jobs, and a button/link to show the selected jobs details in a table below the selection field using select2 with RoR, as in the image
Job descriptions Viewer .

My issue is that I cannot pass the selected Jobs IDs to the controller, and I get this message:


Completed 406 Not Acceptable in 20ms (ActiveRecord: 0.0ms)
ActionController::UnknownFormat (ActionController::UnknownFormat):
app/controllers/job_descriptions_controller.rb:81:in `updateJobs'


My controller method :

def updateJobs
@selected = JobDescription.where(id: params[:selectJdField2])
respond_to do |format|
format.js
format.html
end
end


The main View (jdComparison.html.erb) will render two partials

<h1>Listing Job Descriptions</h1>
<%= render 'sidebar' %>
<div class="clearfix"></div>
<div>
<%= render partial: 'item_list', locals: { job_desc: @job_descriptions} %>
</div>


The _sidebar.html.erb partial has selet2 field and a link to refresh the Jds that called "Find Link":

<div class="col-sm-8">
list of JDs:
<%= select_tag "selectJdField", options_from_collection_for_select(@job_descriptions, :id, :job_title), { :multiple => true } %>
</div>
<%= link_to "Find Link", updateJobs_path(@job_descriptions), :remote => true %>
<script>
$(document).ready(function() { $("#selectJdField").select2(); });
</script>


The _item_list.html.erb partial will view all JDs have been chosen in the select2 field:

<div>
<table>
<thead>
<tr>
<th>Job title</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<% job_desc.each do |job_description| %>
<tr>
<td><%= job_description.job_title %></td>
<td><%= job_description.department %></td>
</tr>
<% end %>
</tbody>
</table>
</div>


updateJobs.js.erb, should refresh the JDs list when I click the "Find Link" button (I think my first issue is here)

$("#div_id").html("<%= escape_javascript(render partial: 'item_list', locals: { job_desc: @selected}) %>")


The JS file (I think my second issue is here):

$ ->
updateLists = () ->
$.ajax
url:'updateJobs'
type: 'post'
dataType: 'html'
format: 'js'
data: {
selectJdField2 : $('#selectJdField').val()
}


The routes:

get 'updateJobs' => 'job_descriptions#updateJobs'
post 'updateJobs' => 'job_descriptions#updateJobs'


When I replace the controller method with this:

def updateJobs
@selected = JobDescription.where(id: 1)
end


it will give me the details of JD number 1 after clicking the Find Link. Kindly, I need your help..

Answer

This what I've done to make it works: I have relapsed the "Find Link" with a normal button:

<button id="btnFind">Find</button>

I added "id" to the first div in _item_list.html.erb partial

<div id = "div_id">

In js file:

$ ->
  $(document).on 'change', '#selectJdField', (evt) ->
      updateLists()
  $(document).on 'click', "#btnFind", (evt) ->
     updateLists()
  updateLists = () ->
   $.ajax  '/updateJobs',
    type: 'GET'
    dataType: 'script'
    data:   {
     selectJdField2 :   $('#selectJdField').val()   
    }

and I didn't need (post 'updateJobs') in the routes file.. Now, everything work fine...Thank you "Venkat Ch"