Dimitri de Ruiter Dimitri de Ruiter - 5 months ago 30
jQuery Question

Rails: make list item clickable

Instead of the link_to tag to show details (see code below), I want to make the entire list item clickable.

<ol class="list-group">
<% @users.each do |user| %>
<li class="list-group-item clearfix">
<h3 class="pull-right"><small class="text-uppercase">created </small><%= user.created_at.to_time %></h3>
<h2 class="h3"><%= user.first_name %> <%= user.last_name %><small> <%= user.username %></small></h2>
<%= link_to "details", user_path(@user), class: "pull-right" %>
<h4><%= user.email %></h4>
</li>
<% end %>




Have already tried with <% link_to .... |do| around the li. However that makes all the data in the li separately clickable. How can this be done?

Answer

Assuming you are using bootstrap you should look at the clickable linked list group item. This uses divs and a tags instead of lists. Below is how it might look:

<div class="list-group">
<% @users.each do |user| %>
    <%= link_to user_path(user), class: "list-group-item" do %>
        <h3 class="pull-right"><small class="text-uppercase">created </small><%= user.created_at.to_time %></h3>
        <h2 class="h3"><%= user.first_name %> <%= user.last_name %><small> <%= user.username %></small></h2>
        <h4><%= user.email %></h4>
   <% end %>
<% end %>
</div>
Comments