Question

我尝试使用此guide制作动态选择菜单;但是，它似乎没有改变select select语句。

以下是我所拥有的代码：

#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

这是.js.erb文件：

#update_classe_skills.js.erb

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

这是我的AJAX脚本：

#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'
      });
    });
 });

最后，这是我的选择菜单：

#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 :classe_id, "Class" %><br>
    <%= f.select :classe_id, options_for_select([["Barbarian", 1], ["Bard", 2], ["Cleric", 3], ["Druid", 4], ["Fighter", 5], ["Monk", 6], ["Paladin", 7], ["Ranger", 8], ["Rogue", 9], ["Sorcerer", 10], ["Warlock", 11], ["Wizard", 12]], selected: "#{@character.classe_id}"), include_blank: true, id:'character_classe_id' %>
    <span><%= @character.errors[:classe_id][0] %></span>
</p>

#_skills_step.html.erb
<div id="classe_skill_proficiency_one">
    <p>
        <%= f.label :classe_skill_option_one, "Skill Proficiency" %>
        <br>
        <%= f.collection_select(:classe_skill_option_one, @skills, :name, :name,{:prompt   => "Select a Skill"}, {id: 'character_classe_skill_option_one'})%>
    </p>
</div>

我曾经把所有的部分内容都从“新的＆＃39;但是，这看起来并不起作用。我自己尝试过对它进行故障排除，所以事情可能会有点不稳定。

当我在更改课程后查看服务器控制台时，我看到以下内容：

Processing by CharactersController#new as JS
  Parameters: {"classe_id"=>"1", "_"=>"1454977094482"}
  [list of stuff being loaded and rendered]
  Skill Load (0.0ms)  SELECT "skills".* FROM "skills"

因此，这让我相信它正在引导AJAX请求，但只是加载整个技能列表而不是加入特定类的技能。

正确连接表，因此不是问题。

任何人都对如何让选择菜单更改它的选项有任何想法？

Answer 1

这样做：

#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') %>");

我相信你的代码中有几处错误：

您的ajax网址依赖于JS值（classe_id），但您还没有
您的update_classe_skills JS未更新select（仅限容器div）
您的控制器方法效率低下

Answer 2

我最终搞清楚了。它最终成为一个路线问题。

我更改了以下内容：

#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

我还必须将protect_from_forgery_except :update_classe_skills添加到我的角色控制器中。

之所以发生这种情况，是因为我的路线中resources :characters生成的节目路线。它正在寻找/characters/:id，因此我的路线正在作为展示路线处理，因为没有:id => "update_classe_skills"

而没有结果

动态选择菜单导轨4

2 个答案: