Rails & Javascript: Render a partial in a modal based off bootstrap button dropdown

Question

I'm trying to figure out how to get a bootstrap button dropdown to render a partial which is inside of a nested form. Basically at this point I have the dropdown button able to open the modal, however the modal body is empty. The content of the modal should display different partials based off of what dropdown link the user pressed.

this is the button dropdown calling the modal

<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>

here's some javascript that I was using before I decided to change over and try and use a button dropdown instead of a html select tag.

<!-- 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>

here's the nested form

  <!-- 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 -->

here's the old html select that was working but I'm trying to convert over to the button dropdown

      <!-- 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>

score 0 · Accepted Answer · answered Oct 25 '17 at 23:10

OK I got it working finally. I was pointed in the right direction due to this SO post 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>

the div#cert and div#course are on the partials so a modal gets rendered each time any of the dropdown buttons gets clicked and depending on the id of the list item its corresponding partial will be shown.

Rails & Javascript: Render a partial in a modal based off bootstrap button dropdown

1 Answers1