Rails＆Javascript：ブートストラップボタンのドロップダウンに基づいてモーダルで部分的にレンダリング

Question

入れ子になったフォームの内部にある部分をレンダリングするためのブートストラップボタンのドロップダウンを取得する方法を解明しようとしています。基本的にこの時点で私はモーダルを開くことができるドロップダウンボタンを持っていますが、モーダルボディは空です。モーダルの内容は、ユーザーが押されたドロップダウンリンクに基づいて異なる部分を表示する必要があります。

私はにわたって変化し、代わりにHTMLのselectタグのボタンドロップダウンを試してみて、使用することを決定する前に、これは、モーダル

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Add <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu pull-right"> 
    <li><a href="#achievementModal" data-toggle="modal" value="cert">Certification</a></li> 
    <li><a href="#achievementModal" data-toggle="modal" value="course">Course</a></li> 
    </ul> 
</div> 

を呼び出すボタンのドロップダウンメニューには、ここで私が使用していたいくつかのjavascriptのですされています。

<!-- JQuery to show the form partials based on user selection --> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("select#select_id").bind("change",function() { 
    if ($(this).val() == "cert") 
     $("div#cert").show(); 
    else 
     $("div#cert").hide(); 

    if ($(this).val() == "course") 
     $("div#course").show(); 
    else 
     $("div#course").hide();   
    }) 
}) 
</script> 

は、ここでは、ここで古いHTMLが働いていたことを選択だが、私がボタンのドロップダウンにオーバー変換しようとしているネストされた形

<!-- one-to-many nested attributes --> 
    <%= form_for(@user) do |f| %> 

    <%= f.fields_for :achievements, Achievement.new do |ff| %> 

     <!-- a partial is rendered based on the user dropdown selection -->  
     <div id="cert"> 
     <%= render partial: "achievements/new_certification", locals: { ff: ff } %> 
     </div> 
     <div id="course"> 
     <%= render partial: "achievements/new_course", locals: { ff: ff } %> 
    </div>   
    <% end %><!-- fields_for --> 

    <%= f.submit 'Save', id: "submit-achievement", class: 'btn btn-primary form-control' %> 

    </div><!-- modal body --> 

    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 

    <% end %><!-- form_for --> 

だ

 <!-- achievement dropdown calls jquery -->  
    <select id="select_id" class="form-control"> 
    <option selected="selected">Select an Achievement</option>  
    <option value="cert"> Certification </option> 
    <option value="course"> Course </option>  
    </select> 

Answer 1

私はそれが働いて得たOK最後に。私はSO投稿によりこれに右方向に向けたjQuery $(this).val returns 0

  <!-- Single button --> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Add <span class="caret"></span> 
      </button> 
      <ul id="select_id" class="dropdown-menu pull-right"> 
      <li id="cert1" class="dropdown-item"><a href="#achievementModal" data-toggle="modal">Certification</a></li> 
      <li id="course1" class="dropdown-item"><a href="#achievementModal" data-toggle="modal">Course</a></li> 
      </ul> 
     </div>   




<script> 
    $('li.dropdown-item').click(function() 
    { 
    //alert(this.id); 

    if (this.id == "cert1") 
     $("div#cert").show(); 
    else 
     $("div#cert").hide(); 

    if (this.id == "course1") 
     $("div#course").show(); 
    else 
     $("div#course").hide();   
    }); 
    </script>  

のdiv＃の証明書とのdiv＃コースはとてもモーダルドロップダウンボタンのいずれかをクリックしてによって取得した各時間にレンダリングされるパーシャルにありリストアイテムのidに対応する部分が表示されます。