Making a table row into a link in Rails using Coffeescript

Question

This is related to the following question but I would like to use coffeescript instead of javascript for comparability with the defaults in Rails 4.

The starting point is code provided in answers to an earlier question: Making a table row into a link in Rails

The view ERB code contains a table generator with the following code:

<% @songs.each do |song| %>
  <tr data-link="<%= edit_song_path(song) %>">
    <td><%= song.Name %></td>
    <td><%= song.Group %></td>
  </tr>
<% end %>

The <tr data-link="<%= edit_song_path(song) %>"> line is based on the answer given in the above linked question.

I have the follwing in the songs.js.coffee file:

$("tr[data-link]").click -> 
  window.location = this.dataset.link

This is my translation for the javascript in the answer from Mark Berry. I have also tried the other suggestions such as window.location = $(this).data("link").

When the page is loaded the table rows are not clickable. If I replace the action of setting the window.location with an alert, I get the alert dialog when the page loads and not when the user clicks a table row.

The above coffeescript code is the only code in the song.js.coffee file. Am I missing anything that needs to be wrapped around the code?

Partial answer: Adding $ -> before the original coffeescript code as suggested in the first comment does make the table rows selectable ONCE. I believe from other reading that the dollar sign variable has been made an alias to jQuery (an example of this is in the idioms chapter of The Little Book on Coffeescript: http://arcturo.github.io/library/coffeescript/04_idioms.html).

Unfortunately, after the page is loaded one table row can be selected causing the edit page to be displayed, but if the user returns to the page, either using the back button on the browser or a link back to the page, the table rows are no longer selectable.

The new coffeescript code is:

$ ->
  $("tr[data-link]").click -> 
    window.location = this.dataset.link

Is the above code the correct translation from javascript to coffeescript. I am new to both scripting languages.

Is there a different answer to making a clickable table row using coffeescript in Rails 4?

Thank you.

score 0 · Accepted Answer · answered Sep 08 '13 at 00:17

Yes, the code you've posted is correct translation. "jstocoffe.org" is a good site (although some bugs are reported), that you can use to translate JavaScript to CoffeeScript and vice versa.

I'm unsure as to why it's not working as you say that the table rows become "unclickable" as the code you've posted after @muistooshort's recommendation should work. The reason I say this is because you are not manipulating the DOM here, you have attached the click event to table rows with data-link attribute when document becomes ready (this is the $ ->) and this should work as expected because the back button and full page refresh reloads the DOM.

For dynamically added content (or in case of DOM manipulation as mentioned earlier) you need to use jQuery on method (replacement for old live method) to bind events to "selectors" through parent or elements further up in the DOM tree. Have a read on the "on" method of jQuery which will be useful not just for this issue but for any future event handling you will work on.

For this issue though, you can try the following:

$ ->
  $(document).on 'click', 'tr[data-link]', (evt) -> 
    window.location = this.dataset.link

Hope this helps.

Making a table row into a link in Rails using Coffeescript

1 Answers1