Just getting started with Rails and I am trying to create clickable table rows in Rails using bootstrap tables. I have managed to do this, however there seems to be a problem where when I click on the row through to the show page, then press the back button on that page to return to the index view, the clickable rows do not work anymore. I need to refresh the page to get it to work again.

I have taken a look at Rails 3 - How to make entire table row clickable using jQuery along with other answers on the site. Still does not seem to work.

My code is as follows

Index Page

<tr data-link="<%= source_path(source) %>">
        <td><%= source.name %></td>
        <td><%= source.description %></td>
        <td><%= link_to truncate(source.url, :length => 40), source.url, :target => '_blank' %></td>
        <td><%= source.category %></td>
        <td><%= source.user.name if source.user %></td>
      </tr>

application.js

jQuery(function($) {
$("tr[data-link]").click(function() {
window.location = this.dataset.link
});
})

Just getting started with Rails and I am trying to create clickable table rows in Rails using bootstrap tables. I have managed to do this, however there seems to be a problem where when I click on the row through to the show page, then press the back button on that page to return to the index view, the clickable rows do not work anymore. I need to refresh the page to get it to work again.

I have taken a look at Rails 3 - How to make entire table row clickable using jQuery along with other answers on the site. Still does not seem to work.

My code is as follows

Index Page

<tr data-link="<%= source_path(source) %>">
        <td><%= source.name %></td>
        <td><%= source.description %></td>
        <td><%= link_to truncate(source.url, :length => 40), source.url, :target => '_blank' %></td>
        <td><%= source.category %></td>
        <td><%= source.user.name if source.user %></td>
      </tr>

application.js

jQuery(function($) {
$("tr[data-link]").click(function() {
window.location = this.dataset.link
});
})

• javascript
• jquery
• ruby-on-rails

• 1 This is because you define the event listener in a-way-i-cant-find-the-name but you should define it in a $(document).ready(function(){#your_js_goes_here#}) – MrYoshiji Commented Apr 9, 2015 at 21:16
• @MrYoshiji jQuery(function($) { is the same thing as $(document).ready(function(){. Just a shorthand version. See api.jquery./ready – charlietfl Commented Apr 9, 2015 at 22:44
• I am not sure about it @charlietfl, I can't find any source that confirm that – MrYoshiji Commented Apr 9, 2015 at 22:48
• @MrYoshiji look at the docs I just linked...see Which is equivalent to calling – charlietfl Commented Apr 9, 2015 at 22:48
• Yes, jQuery(document).ready, but not the OP's jQuery(function($){#...}) – MrYoshiji Commented Apr 9, 2015 at 22:49

3 Answers 3

I like to leverage Stimulus for this type of problem. Here's a simple stimulus controller I'm calling nav_controller.js that has a URL value and a method goToUrl that we'll call with a click action.

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    url: String
  }

  goToUrl(){
    // Rails 7
    Turbo.visit(this.urlValue)
    // Prior to Rails 7 I would use the following
    // Turbolinks.visit(this.urlValue)
  }
}

To use this on any element we can set it up as follows. This example is used on a table row as we iterate over a collection of items.

<tbody>
  <% @items.each do |item| %>
    <tr data-controller="nav" 
        data-nav-url-value="<%= item_path(item) %>"
        data-action="click->nav#goToUrl"
        style="cursor:pointer">
      <td><%= item.id %></td>
      <td><%= item.name %></td>
      <td><%= item.description %></td>
    </tr>
  <% end %>
</tbody>

Hope this helps anyone else faced with this kind of issue in their ui. I used this in all of my Rails projects now for allowing users to just click on an entire row vs using a single clickable element.

Try using jQuery data() method

jQuery(function($) {

    $("tr[data-link]").click(function() {
        window.location = $(this).data('link');
    });

});

I don;t know why yours isn't working. Perhaps you have errors thrown in browser console

On Rails with turbo, this is a simpler solution that call Turbo visit directly using an onclick handler (similar to @tbonz but without the need for a stimulus controller)

<% @products.each do |product| %>
  <tr onclick="Turbo.visit('<%= product_path(product) %>')"
      style="cursor: pointer">
    <td>
      <%= product.name %>
    </td>
    <td>
      <%= product.sku %>
    </td>
  </tr>
<% end %>