Renan Renan - 7 months ago 23
Ruby Question

Adding a drop down inside bootstrap buttons row with ruby code output

On my Rails app I have a row of buttons, I want to make one of them into a drop down menu that will present items extracted from a db table, the ruby code works but I can't get it to appear as a drop down.

Here is the ruby code:

<% @all_makes.each do |allMakesDisplay| %>
<a id="allMakesDisplay"><%= link_to allMakesDisplay.name, make_index_path(make_name: allMakesDisplay.name) %></a>
<% end %>


And this is the row with the drop down:



<div class="collapse navbar-collapse top-bar" id="bs-example-navbar-collapse-1">
<div class="row">
<div class="col-md-3">
<button class="btn btn-lg btn-secondary btn-block">
<a href="/">Home</a>
</button>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-lg btn-secondary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<a href="/dealership/category/make">Makes</a>
<span class="caret"></span>
</button>
<% @all_makes.each do |allMakesDisplay| %>
<ul class="dropdown-menu">
<li>
<a href="<%= link_to allMakesDisplay.name, dealership_category_make_path(allMakesDisplay) %>"></a>
</li>
</ul>
<% end %>
</div>
</div>
<div class="col-md-3">
<button class="btn btn-lg btn-secondary btn-block">
<a href="blog.html">Models</a>
</button>
</div>
<div class="col-md-3">
<button class="btn btn-lg btn-secondary btn-block">
<a href="contact.html">My Portfolio</a>
</button>
</div>
</div>
</div>





The
MAKES
should be the drop down, the are 12 items that should be returned.

Thanks

Answer

There are a few things going on:

  • The #each loop should be inside <ul>.
  • link_to will create an anchor tag <a>, so it should not be used as a href attribute. link_to

<div class="collapse navbar-collapse top-bar" id="bs-example-navbar-collapse-1">
  <div class="row">
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="/">Home</a>
      </button>
    </div>
    <div class="col-md-3">
      <div class="dropdown">
        <button class="btn btn-lg btn-secondary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
          <a href="/dealership/category/make">Makes</a>
          <span class="caret"></span>
        </button>
        
          <ul class="dropdown-menu">
            <!--for each element, create a <li> (not <ul>)-->
            <% @all_makes.each do |allMakesDisplay| %>
            <li>
              <%= link_to allMakesDisplay.name, 
                          dealership_category_make_path(allMakesDisplay) %>
            </li>
           <% end %> <!-- end #each loop-->
          </ul>
          
      </div>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="blog.html">Models</a>
      </button>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="contact.html">My Portfolio</a>
      </button>
    </div>
  </div>
</div>