ANinjaSloth February 2016

Dynamic Select Menu Rails 4

I'm trying to make a dynamic select menu using this guide; however, it doesn't seem to be changing the select select statement.

Here is what I have as far as code:

#characters_controller.rb
    def new
        @skills = Skill.all
        @classes = Classe.all
        @background = Background.all
        @character = Character.new
    end
    def update_classe_skills
        classe = Classe.find(params[:character][:classe_id])

        @skills = classe.skills.map{|a| [a.name,a.name]}.insert(0,"Select a Skill")
        respond_to do |format|
            format.js
        end
    end


#routes.rb
Rails.application.routes.draw do
    resources :characters
    get 'characters/update_classe_skills', :as => 'update_classe_skills'
end

This is the .js.erb file:

#update_classe_skills.js.erb

$('#character_classe_skill_option_one').html("<%= escape_javascript(options_for_select(@skills)) %>");

This is my AJAX script:

#skills_select_handler.js
$(document).ready(function() {
    $(document).on('change','#character_classe_id', function() {
      $.ajax({
        url: "#{update_classe_skills_path}",
        data: {
          classe_id : $('#character_classe_id').val()
        },
        dataType: "script",
        type: 'GET'
      });
    });
 });

And lastly, this is my select menu:

#new.html.erb
<%= javascript_include_tag "skills_select_handler.js"  %>
<%= form_for :character, url: characters_path, method: :post do |f| %>
    <%= render :partial => "info_step", :locals => {:f => f} %>
    <%= render :partial => "rand_prompt_step", :locals => {:f => f} %>
    <%= render :partial => "skills_step", :locals => {:f => f}%>
<% end %>
#_info_step.html.erb
<p>
    <%= f.label :class        

Answers


Richard Peck February 2016

Do this:

#config/routes.rb
resources :characters
  get "update_classe_skills/:classe_id", as: 'update_classe_skills', on: :collection #-> url.com/characters/update_classe_skills/:classe_id
end

#skills_select_handler.js
$(document).on("change","#character_classe_id", function(e) {
  var classe_id = $(this).val();
  $.ajax({
     url: "characters/update_classe_skills/" + classe_id,
     data: { classe_id : classe_id },
     dataType: "script",
     type: 'GET'
   });
 });

 #app/controllers/characters_controller.rb
 class CharactersController < ApplicationController

    def update_classe_skills
      @classe = Classe.find params[:classe_id]
      respond_to do |format|
        format.js
      end          
    end

end

#app/views/characters/update_classe_skills.js.erb
$('select#character_classe_skill_option_one').empty.append("<%=j options_from_collection_for_select(@skills, 'name', 'name') %>");

I believe you have several errors in your code:

  1. Your ajax URL is reliant in a JS value (classe_id), yet you don't have it
  2. Your update_classe_skills JS doesn't update the select (only the container div)
  3. Your controller method was inefficient


ANinjaSloth February 2016

I ended up figuring it out. It ended up being a route issue.

I changed the following:

#characters_controller.rb
def update_classe_skills
    classe = Classe.find(params[:classe_id])

    @skills = classe.skills.map{|a| [a.name,a.name]}.insert(0,"Select a Skill")
    respond_to do |format|
        format.js
    end
end


#skills_select_handler.js
$(document).ready(function() {
    $(document).on('change','#character_classe_id', function() {
      $.ajax({
        url: "/update_classe_skills",
        data: {
          classe_id : $('#character_classe_id').val()
        },
        dataType: "script",
        type: 'GET'
      });
    });
 });

#routes.rb
Rails.application.routes.draw do
    resources :characters
    match "/update_classe_skills", :to => "characters#update_classe_skills", :via => [:get]
end

I also had to add protect_from_forgery_except :update_classe_skills to my characters controller.

The reason why this was happening is because of the show route generated by resources :characters in my routes. It was looking for /characters/:id and therefore my route was being processed as show route, and getting no results since there was no :id => "update_classe_skills"

Post Status

Asked in February 2016
Viewed 3,823 times
Voted 14
Answered 2 times

Search




Leave an answer