ajax - Dynamic Select Menu in Ruby on Rails -

thanks in advance whoever tries or answer issue. have city model, area model, user model. city model , area model has "has_many" association area model , user model has "has many through" association

i want area select menu display according city selected, while creating new user when item in city select menu selected (ajax request made), area select menu should show areas belongs city.

this code please tell me m wrong. (thanks)

(app/views/users/_form) <%= form_for(@user, remote: true) |f| %>   <div class="field">     <%= f.label :name %><br>     <%= f.text_field :name %>   </div> <p> <%=f.collection_select :city_id, city.order(:name), :id, :name, include_blank: true%> </p>  <div class="a"></div>    <div class="actions">     <%= f.submit %>   </div> <% end %> 

(app/controllers/users_controller.rb)

    class userscontroller < applicationcontroller   before_action :set_user, only: [:show, :edit, :update, :destroy]      def custom         @tilu = params[:city_id]       respond_to |format|         format.js       end     end   # /users   # /users.json   def index     @users = user.all   end    # /users/1   # /users/1.json   def show   end    # /users/new   def new     @user = user.new     @areas= area.all   end    # /users/1/edit   def edit   end    # post /users   # post /users.json     before_action :get_area, only:[:create]   def create     @user = user.new(user_params)        @user.area_ids = @area      respond_to |format|       if @user.save         format.html { redirect_to @user, notice: 'user created.' }         format.json { render :show, status: :created, location: @user }       else         format.html { render :new }         format.json { render json: @user.errors, status: :unprocessable_entity }       end     end   end    # patch/put /users/1   # patch/put /users/1.json   def update     respond_to |format|       if @user.update(user_params)         format.html { redirect_to @user, notice: 'user updated.' }         format.json { render :show, status: :ok, location: @user }       else         format.html { render :edit }         format.json { render json: @user.errors, status: :unprocessable_entity }       end     end   end    # delete /users/1   # delete /users/1.json   def destroy     @user.destroy     respond_to |format|       format.html { redirect_to users_url, notice: 'user destroyed.' }       format.json { head :no_content }     end   end    private     # use callbacks share common setup or constraints between actions.     def set_user       @user = user.find(params[:id])     end     def get_area         @area = params[:user][:area_id]     end      # never trust parameters scary internet, allow white list through.     def user_params         params.require(:user).permit(:name, :description,[:area_id])     end end 

(app/assets/javascripts/users.js.coffe)

jquery ->   $(document).on 'change', '#user_city_id', (evt) ->     $.ajax '/users/custom',       type: 'get'       datatype: 'html'       data: {         city_id: $('#user_city_id :selected').val()       }       error: (jqxhr, textstatus, errorthrown) ->         console.log("ajax error: #{textstatus}")       success: (data, textstatus, jqxhr) ->         console.log("dynamic country select ok!") 

(config/routes.rb)

rails.application.routes.draw   resources :users   resources :areas   resources :cities     'users/custom' 

(app/views/users/_customtemplate.html.erb)

<%=f.collection_select :area_id, area.where(city_id: @tilu), :id, :name, include_blank: true %> 

last not least... (app/views/users/custom.js.erb)

$('.a').append("<%=j render 'customtemplate' %>"); 

help!!

ruby server console error

started "/users/custom?city_id=1" 127.0.0.1 @ 2015-09-30 21:20:01 +0530 processing userscontroller#show html
parameters: {"city_id"=>"1", "id"=>"custom"} user load (0.3ms) select "users".* "users" "users"."id" = ? limit 1 [["id", 0]] completed 404 not found in 76ms (activerecord: 0.3ms)

activerecord::recordnotfound (couldn't find user 'id'=custom):
app/controllers/users_controller.rb:77:in `set_user'

rendered /usr/local/lib/ruby/gems/2.2.0/gems/actionpack-4.2.1/lib/action_dispatch/middleware/templates/rescues/_source.erb (4.1ms)

browser console error

get http://localhost:3000/users/custom?city_id=1 404 (not found)send @ jquery-4075e3b7b3964707c653f61b66f46dec.js?body=1:9665jquery.extend.ajax @ jquery-4075e3b7b3964707c653f61b66f46dec.js?body=1:9216(anonymous function) @ users-c743c610a872f962fb75a7ac244905cd.js?body=1:4jquery.event.dispatch @ jquery-4075e3b7b3964707c653f61b66f46dec.js?body=1:4671elemdata.handle @ jquery-4075e3b7b3964707c653f61b66f46dec.js?body=1:4339listpicker._handlemouseup @ about:blank:544 users-c743c610a872f962fb75a7ac244905cd.js?body=1:11 ajax error: error

ok there many issues me pick through them; i'd do:

---

you're looking called dynamic select menus. mention in title, wanted clarify terminology.

dynamic select menus should send ajax request when change value in select box. process should succinct (ie send id controller), , end set of returned data populate next select box:

#config/routes.rb resources :cities     "update", to: "users#custom" #-> url.com/cities/:city_id/update end resources :users #-> put below users/show method doesn't catch above calls  #app/controllers/users_controller.rb class userscontroller < applicationcontroller    def custom       @city = city.find params[:city_id]       respond_to |format|         format.js       end    end end  #app/views/users/custom.coffee $('.a').append("<%=j render 'users/customtemplate' %>"); 

above "backend". here "frontend":

#app/views/users/_form.html.erb (removed html clean this) <%= form_for(@user, remote: true) |f| %>     <%= f.text_field :name %>     <%= f.collection_select :city_id, city.order(:name), :id, :name, include_blank: true %>     <%= f.submit %> <% end %>  #app/assets/javascripts/users.coffee $(document).on 'change', '#user_city_id', (evt) ->     $.ajax '/cities/' + $(this).val() + '/update',       type: 'get'       datatype: 'html'       data: {         city_id: $('#user_city_id :selected').val()       }       error: (jqxhr, textstatus, errorthrown) ->         console.log("ajax error: #{textstatus}")       success: (data, textstatus, jqxhr) ->         console.log("dynamic country select ok!") 

you'll gain lot watching railscast: