Making a table row into a link in Rails

Question

I am trying to make a row in a table link to the edit page. I know the links are being created, because I can print them out. I am close, but am missing something important. What do I change to make the link work properly?

<h1>Scouts</h1>
<p><%= button_to "Add a new Scout", new_scout_path, :method => :get %></p>
<div class="message-board">
  <table>
    <tr>
      <th>Name</th>
      <th>Rank</th>
      <th>Advancement Date</th>
      <th>Age</th>
    </tr>  

<% @scouts.each do |scout| %>
    <tr <% link_to edit_scout_path(scout) %> >
      <td><%= scout.name %></td>
      <td><%= scout.rank %></td>
      <td><%= scout.advancement %></td>
      <td><%= scout.age %></td>
    </tr>
<% end %>
  </table>
</div>

You can also use onlick=location.href='PATH' in the tr tag. I had to do some ugly formatting in some erb tags, but it works perfectly. — jhamm, Sep 08 '12 at 09:53

score 76 · Accepted Answer · edited Nov 18 '17 at 04:42

76

As Robin said, that's invalid HTML. You probably shouldn't do that.

I personally would put an onclick event on the tr using jQuery. The tr element would look like this:

<tr data-link="<%= edit_scout_path(scout) %>">
   ...
</tr>

And then the associated JavaScript (placed in a file such as app/assets/javascripts/scouts.js) would be something like this:

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

This would make all tr elements that have a data-link attribute act as if they were URLs in the most unobtrusive way I can think possible.

edited Nov 18 '17 at 04:42

Jeremy Moritz

13,864
7
39
43

answered Mar 30 '12 at 15:15

Ryan Bigg

106,965
23
235
261

1

I understand the js way of handling it, but why wouldnt we handle this through rails and not pull in any js? – jhamm Mar 30 '12 at 20:29
11

With Rails 3.2.3 and jquery-rails 2.0.2, I got the message "this.data is not a function." Changing the jQuery function contents to `window.location = this.dataset.link` got it working. – Mark Berry Aug 29 '12 at 00:47
1

What if there's a button or link on that same row that we don't want to apply this logic to? Struggling quite a bit with this now. – jwg2s Dec 17 '12 at 23:53
8

Works for me only using like `window.location = $(this).data("link")` – dombesz Jun 11 '13 at 12:59
Both Mark Berry's and dombesz's comment/solution worked for me. I prefer dombesz's way of doing it. – kyle Aug 22 '13 at 18:12
dombesz's solution is the only one that worked for me across all browsers, including IE. – John Creamer Jan 23 '14 at 17:07
One question - how can you have the mouse icon switch to the link chap when hovering with this solution? Otherwise it works great! – nktokyo Feb 24 '14 at 02:26
I ran into the same issue as @jwg2s. I have a table column with buttons. Clicking on the button also fires this click event for the table row link. I tried [these solutions](http://stackoverflow.com/q/11223626/72321) but they didn't work for me. – Dennis Feb 27 '14 at 18:59
2

I just figured out [a hacky solution for the embedded button problem](https://gist.github.com/dideler/54a13598027658edeca4). My button is a link (with some styling) and contains a glyphicon. I assign the window location unless the event target is an `a` or `i` element. Why those elements? Because the button consists of an `a` element with nested `i` element, and the cursor can click either. – Dennis Feb 27 '14 at 19:23
This is not work for me. it is showing the "Encounter syntax error" while I am writing like this `` and follow the same jquery functionality. – Abnish Dec 24 '21 at 06:35

Pradeep Agrawal · Answer 2 · 2015-07-20T09:31:31.983

5

I am new on rails and I have the same problem and use the Ryan's advise with some changes that are following -

$("tr").click(function() { window.location = $(this).data("link") })

You have to use $(this).

edited Jul 20 '15 at 09:31

answered Jul 20 '15 at 09:12

Pradeep Agrawal

307
2
10

Also, if using ajax partial renders, use **.on('click',function () {...});** instead... – Gobol Oct 24 '15 at 21:21
How can u make the link visible in the bottom left? As far as I know without that it makes hard for crawler to find the given site. – Sean Magyar Feb 24 '16 at 12:03
You can add css on that link sothat it will be visible easily. Change color of that link or something. – Pradeep Agrawal Mar 11 '16 at 07:56

score 0 · Answer 3 · answered May 14 '19 at 01:02

0

Here is my take to make those links, remote: true

$("tr[data-link]").click(function () {
    $.ajax({
        url: this.getAttribute('data-link'),
        dataType: "script",
        type: "GET"
    });
    event.preventDefault();
});

answered May 14 '19 at 01:02

Jean-Hugues Guinot

1

score 0 · Answer 4 · answered Dec 13 '19 at 04:09

Simple Solution: add a link into a table cell:

This doesn't answer your question, but it provides a solution to the problem you are likely really after: just add an edit link into a cell, rather than on the table row because having a link on the table row itself may lead to expected results for users. If they are clicking on it, they might not want to be led to an edit link.

Like my grandpa used to say: KISS - Keep It Simple Stupid

    <% @scouts.each do |scout| %>
        <tr>
         <!-- Simply edit the scout -->
          <td> <%= link_to edit_scout_path(scout), "Edit Scout" %> </td>      
          <td><%= scout.name %></td>
          <td><%= scout.rank %></td>
          <td><%= scout.advancement %></td>
          <td><%= scout.age %></td>
        </tr>

Of course you could probably do fancy things like in-place editing, or use a partial for each row, this is just a basic CRUD example. — BenKoshy, Dec 11 '20 at 23:40

Making a table row into a link in Rails

4 Answers4

Simple Solution: add a link into a table cell:

Linked

Related