matthewvb matthewvb - 6 months ago 44
Ajax Question

Routing error on dynamic select rails 4 and ajax

Been working this issue and can't figure it out.

Trying to make a dynamic select to pick a city based on a state. This is for a devise user registration page, which I think is only adding to the routing error.

Ajax Code: (assets/javascripts/registration.js.coffee)

$ ->
$(document).on 'change', '#user_state_id', (evt) ->
$.ajax '/registrations/update_cities',
type: 'GET'
dataType: 'script'
data: {
state_id: $("#user_state_id option:selected").val()
}
error: (jqXHR, textStatus, errorThrown) ->
console.log("AJAX Error: #{textStatus}")
success: (data, textStatus, jqXHR) ->
console.log("Dynamic state select OK!")


Controller (registrations_controller.rb)

def edit
@states = State.all
@cities = Cities.where("state_id = ?", State.first.id)
end

def update_cities
@cities = Cities.where("state_id = ?", params[:state_id])
respond_to do |format|
format.js
end
end


Update JS: (views/devise/registrations/update_cities.js.coffee)

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


Shared Partial (views/shared/_city.html.erb)

<option value="<%= city.id %>"><%= city.name.titleize %></option>


Routes (for reference)

devise_for :users, controllers: {registrations: 'registrations'} do
get 'registrations/update_cities', as: 'update_cities'
end


Error (in logs)

ActionController::RoutingError (No route matches [GET] "/registrations/update_cities"):


rake routes
output

states GET /states(.:format) states#index
POST /states(.:format) states#create
new_state GET /states/new(.:format) states#new
edit_state GET /states/:id/edit(.:format) states#edit
state GET /states/:id(.:format) states#show
PATCH /states/:id(.:format) states#update
PUT /states/:id(.:format) states#update
DELETE /states/:id(.:format) states#destroy
new_user_session GET /users/sign_in(.:format) devise/sessions#new
user_session POST /users/sign_in(.:format) devise/sessions#create
destroy_user_session DELETE /users/sign_out(.:format) devise/sessions#destroy
user_password POST /users/password(.:format) devise/passwords#create
new_user_password GET /users/password/new(.:format) devise/passwords#new
edit_user_password GET /users/password/edit(.:format) devise/passwords#edit
PATCH /users/password(.:format) devise/passwords#update
PUT /users/password(.:format) devise/passwords#update
cancel_user_registration GET /users/cancel(.:format) registrations#cancel
user_registration POST /users(.:format) registrations#create
new_user_registration GET /users/sign_up(.:format) registrations#new
edit_user_registration GET /users/edit(.:format) registrations#edit
PATCH /users(.:format) registrations#update
PUT /users(.:format) registrations#update
DELETE /users(.:format) registrations#destroy
dashboards_list_zip GET /dashboards/list_zip(.:format) dashboards#list_zip
authenticated_root GET / dashboards#index
root GET / devise/sessions#new


Any help is appreciated. I'm trying to implement something like what was done at: Kernal Garden; with modifications for Devise and state/city levels.

Answer

Got it to work this way: registration.js.coffee:

$ ->
$(document).on 'change', '#user_state_id', (evt) ->
 $.ajax '/registrations/update_cities',
  type: 'GET'
  dataType: 'script'
  data: {
    state_id: $("#user_state_id option:selected").val()
  }
  error: (jqXHR, textStatus, errorThrown) ->
    console.log("AJAX Error: #{textStatus}")
  success: (data, textStatus, jqXHR) ->
    console.log("Dynamic state select OK!")

registrations controller:

def edit
 @states = State.all
 if current_user.state_id.nil?
  @cities = City.where("state_id = ?", State.first.id)
 else
  @cities = City.where("state_id = ?", current_user.state_id) 
 end
end

def update_cities
 @cities = City.where("state_id = ?", params[:state_id])
 respond_to do |format|
  format.js
 end
end

Thanks for the help!

Comments