如何在 Ruby on Rails 中单击类别（不刷新页面）时显示类别中的音乐？

Question

I am building a website for a music database.

I would like to display categories like classical and hip hop first; when the user clicks on a category, I would like to display all the tracks names in that category (I would like to do this without a page refresh). I would also need to support pagination of this list displaying 10 items in one page (and I need to display buttons for display, edit, delete alongside each track in this list)

How can I accomplish this? Does bootstrap provide components that support this kind of implementation?

(If I could do this with a page refresh, I have done this before and I would know how to do it. But I am not sure how to do this without a page refresh)

Answer 1

On views/categories/index.html.erb:

 <% @categories.each do |category| %>
  <%= link_to category_path(category), :remote => true do %>
   <%= category.name %>
  <% end %>
  <div class="category_<%= category.id %>">
  </div>
 <% end %>

Then create a partial views/categories/_show.html.erb (here you can insert a table or a structure with bootstrap row and columns):

<% @category.tracks.each do |track| %>
<%= track.name %>
... and you can add here delete and edit actions

<% end %>

Then create views/categories/show.js.erb:

$(".category_<%= @category.id %>").html("<%= escape_javascript(render("show")) %>");

Fyi what you are trying to do has nothing to do with bootstrap, unless you wanted for instance display tracks on a bootstrap modal.

Answer 2

Here is a poor man's bootstrap example I whipped up: when you click on the Track Category example, the table should expand. (You must have bootstrap v4 set up for this to work) and you must have a track_table partial as well - you can use the same partial for the two different tables that you want:

  <div class="track-group">
    <div class="track track-default">
      <div class="track-heading">
        <h4 class="track-title">
          <p data-toggle="collapse" href="#collapse1"> Track Category (Click to Expand)</p>
        </h4>
      </div>
      <div id="collapse1" class="track-collapse collapse">
        <div class="track-body">
          <%= render 'track-table' %>
        </div>
        <div class="track-footer">
        </div>
      </div>
    </div>
  </div>

Here's how it looks with an existing app on my computer: