Friday, April 15, 2016

Dynamic select boxes with Rails 4

Leave a Comment

I tried to make dynamic select boxes(One boxes choosing info in another), but have some troubles.

routes.rb

get "students/new/update_tutors" => 'students#update_tutors', as: 'update_tutors'   

students_controller.rb

def update_tutors     admin = Administrators.find(params[:administrator_id])     #@tutors = admin.tutors.map{|t| [t.info.name, t.id]}     debugger     @tutors = Tutor.where(administrator_id: params[:administrator_id])     respond_to do |format|        format.js     end end def new     @user = Student.new     @is_super_adm = is_super?     if @is_super_adm       @tutors = Tutor.all.map { |t| [t.info.name, t.id] }       @admins = Administrator.where(is_super: false).map { |adm| [adm.info.name, adm.id] }     else       @tutors = Tutor.where(administrator_id: session[:type_id]).map { |t| [t.info.name, t.id] }     end end 

new.html.erb

<%= form_for @user, remote: true do |student_form| %> <!--....--> <%= label_tag :administrator_id, "Choose local administrator" %><br/> <%= select_tag :administrator_id, options_for_select(@admins), {id: 'administrator_selection'}  %><br/> <!--....--> <%= student_form.label :tutor_id, "Choose Tutor" %><br/> <%= student_form.select :tutor_id, options_for_select(@tutors), {} , {id: 'tutor_selection'}%>   

students.coffee

$ ->   $(document).on 'change', '#administrator_selection', (evt) ->     $.ajax 'update_tutors',       type: 'GET'       dataType: 'script'       data: {         administrator_id: $("#administrator_selection option:selected").val()       }       error: (jqXHR, textStatus, errorThrown) ->         console.log("AJAX Error: #{textStatus}")       success: (data, textStatus, jqXHR) ->         console.log("Dynamic country select OK!") 

update_tutors.coffee

$("#tutor_selection").empty()     .append("<%= escape_javascript(render(:partial => @tutors)) %>") 

I tried to insert alert('msg') into students.js.coffee, and event worked, so I am sure that the problem is in $.ajax but this is first time I am working with ajax and I can't find the bug.

Update

I guess problem is in routing, but i didn't understand why it calls students/update_tutor instead students/new/update_tutor
Log
Started GET "/students/update_tutors?administrator_id=3&_=1459590346845" for 127.0.0.1 at 2016-04-02 11:47:01 +0200
Processing by StudentsController#show as JS
Parameters: {"administrator_id"=>"3", "_"=>"1459590346845", "id"=>"update_tutors"}

Fixed

I changed update_tutors in $.ajax to 'new/update_tutors' and fixed error in update_tutors method in Administrators.find(...) to Administrator.find(...).

1 Answers

Answers 1

Change your Ajax request as per given below,  $ ->   $(document).on 'change', '#administrator_selection', (evt) ->     $.ajax '<%= update_tutors_path %>',       type: 'GET'       dataType: 'script'       data: {         administrator_id: $("#administrator_selection option:selected").val()       }       error: (jqXHR, textStatus, errorThrown) ->         console.log("AJAX Error: #{textStatus}")       success: (data, textStatus, jqXHR) ->         console.log("Dynamic country select OK!") 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment