@challenges = {動的に変化するユーザー} .challenges

Question

:user_idが選択された場合、次のように表示されます。collection_selectそのユーザーの課題はありますか？言い換えれば、どのように我々は

@challenges = @user.challenges.order(:created_at) 

を作ることができる。例えば、

あなたはすべての課題が列挙されている見ることができると私は変更してもuserすべての課題はまだ記載されていたよう。 javascriptは、それぞれのユーザーの課題を列挙することは決してありません。

スキーマ

create_table "duelers", force: true do |t| 
    t.integer "user_id" 
    t.integer "challenge_id" 
    t.datetime "created_at",  null: false 
    t.datetime "updated_at",  null: false 
    t.integer "duel_id",  null: false 
    t.boolean "accept" 
    t.string "user_name" 
    t.string "user_last_name" 
    t.string "challenge_name" 
    end 

    add_index "duelers", ["duel_id"], name: "index_duelers_on_duel_id", using: :btree 

    create_table "duels", force: true do |t| 
    t.text  "consequence" 
    t.text  "reward" 
    t.datetime "created_at", null: false 
    t.datetime "updated_at", null: false 
    end 

モデル

class Duel < ActiveRecord::Base 
    belongs_to :user 
    belongs_to :challenge 
    has_many :duelers 
    accepts_nested_attributes_for :duelers, :reject_if => :all_blank, :allow_destroy => true #correct 
end 

class Dueler < ActiveRecord::Base 
    belongs_to :user 
    belongs_to :challenge 
    belongs_to :duel 
end 

経路

get 'duels/user_challenges', :to => 'duels#user_challenges', as: 'user_challenges' 

のduels_controller

def user_challenges 
    @user = User.find(params[:id]) 
    @challenges = @user.challenges.order(:created_at) 
end 

def new 
    @duel = Duel.new 
    @duel.duelers << Dueler.new(user_id: current_user.id, user_name: current_user.name, user_last_name: current_user.last_name) 
respond_with(@duel) 
end 

決闘/ _form

<%= simple_form_for(@duel) do |f| %> 
    <%= f.fields_for :duelers do |dueler| %> 
    <%= render 'dueler_fields', :f => dueler %> 
    <% end %> 
    <%= link_to_add_association f, :duelers do %> 
    + Dueler 
    <% end %> 
    The loser(s) will <%= f.text_field :consequence, placeholder: "Enter Consequence" %> 
<% end %> 

決闘/ _dueler_fields.html.erb

<%= f.select :user_id, User.order(:name).map { |user| [user.full_name, user.id] }, include_blank: true, id: "change-challenge-options" %> 

    will 

<%= render partial: 'user_challenges', locals: { challenges: Challenge.order(:created_at) } %> 

<script> # Upon changing :user_id this javascript never triggers, how to fix it? Not sure if just javascript problem or also controller or ruby 
    $("#change-challenge-options").change(function() { 
     $.ajax({ 
      type: "GET", 
      url: '<%= user_challenges_path %>', 
      data: {name: $('#change-challenge-options').prop('value')} 
     }); 
    }); 
</script> 

決闘/ _user_challenges.html.erb

<div id="dropdown-no-2"> 
    <%= collection_select(:dueler, :challenge_id, challenges, :id, :full_challenge, include_blank: true) %> 
</div> 

user_challenges.js.erb

$("#dropdown-no-2").html('<%=j render :partial => "user_challenges", locals: {challenges: @challenges} %>'); 

Answer 1

は、この行は変更する必要があるだろうです：

$("#change-challenge-options").change(function() { 

問題はDOMセレクタが前に実行されていることですページは準備完了状態です。このようなテストを実行した場合

var nodes = $("#change-challenge-options") 
console.log(nodes.length) 

ノードリストが空であることがわかります。

静的なWebサイトでは$(function(){})またはdocument.ready(function(){})にラップしますが、Railsではturbolinksを追加することで少し複雑になります。

Railsアプリでは、いくつかのオプションがあります。

あなたはアドバイスhereに従い、特別なリスナーであなたのDOM関連のコードをラップすることができます：

$(document).on('turbolinks:load', function() { 
    $("#change-challenge-options").change(function() { 
     ... 
    } 
}); 

をORあなたはjquery.turbolinks宝石からのアドバイスに従うことができます。 あなたはまず、あなたは、次の方法で、あなたのコードをリファクタリングしたい、宝石をインストールし、application.jsに依存関係を追加したい：

1. document.readyブロックの外あなたのイベントをバインドします。これは直観に反するように見えるかもしれません。私はこのすべての時間をに入れて、このブロックにを入れてアドバイスしています。

2. リファクタリング次の構文を使用するchangeリスナー：

   $(document).on('change', '#change-challenge-options', function() { 
       ... 
   }) 
   

すべてこれは難しい証明されている場合は、あなたは、Gemfileからapplication.jsをturbolinks参照を削除し、application.html.erbすることができます。次に、典型的なdocument.readyコードで十分でしょう：

$(function(){ 
    <all your custom code> 
})