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> 

를 호출 버튼의 드롭 다운입니다.

<!-- 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에 해당 부분이 표시됩니다.