Yousef Yousef - 1 year ago 157
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|

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

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

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 } %>
<%= link_to "Find Link", updateJobs_path(@job_descriptions), :remote => true %>
$(document).ready(function() { $("#selectJdField").select2(); });

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

<th>Job title</th>
<% job_desc.each do |job_description| %>
<td><%= job_description.job_title %></td>
<td><%= job_description.department %></td>
<% end %>

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 = () ->
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)

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

Answer Source

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) ->
  $(document).on 'click', "#btnFind", (evt) ->
  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"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download