6

I am in the middle of creating my first real Rails app, and I'm learning on the go. I have a situation where I need to create nested attributes on one form, and so have been looking at the railscast episodes relevant to that (196 and 197). In the second episode, he uses a link_to_function method, which is apparently no longer available in rails 4.1.

I am wondering how to replace it. I have been trying to link_to, and have tried many of the suggested solutions for others who have posted a similar question, but to no avail.

Here is what my view partial looks like at the moment (though, I've tried many things...)

<p class="offset1 fields">
   <%= f.hidden_field :_destroy %>
   <%= link_to "remove", '#', onclick: 'remove_fields("this")' %>
</p>

And here is my .js.coffee file containing the remove_fields() function:

remove_fields = (link) -> 
    $(link).previous("input[type=hidden]").value = 1
    $(link).up(".fields").hide

This function is supposed to remove a field from the form, but instead just appends the '#' to the url without calling the function.

What is the best way to link to a javascript (coffeescript) function in the assets from a view?

Michael Cruz
  • 864
  • 6
  • 13

1 Answers1

5

A good way to deal with this is:

a) Set your href attribute to "javascript:void(0);" b) Set a DOM id or CSS class attribute to your link

<%= link_to "remove", "javascript:void(0);", id="remove_link" %>

c) Add the js click listener to your element (please check if this is the proper coffeescript syntax)

$ ->
  $('#remove_link').click = ()-> 
    $(link).previous("input[type=hidden]").value = 1
    $(link).up(".fields").hide

d) Always avoid using onclick: on html elements.

UPDATE:

e) Here is an alternative of what might work for your code (after your comment):

$ ->
  $('#remove_link').click = ()-> 
    $('.offset1.fields input').attr('value', 1);
    $('.offset1.fields').hide();
Marcelo Ribeiro
  • 1,718
  • 1
  • 13
  • 27
  • Still not working. I've changed the coffeescript file to simply execute an alert statement just to test it, but it never gets executed. Clicking the link does nothing, except that the bottom left of the browser indicates that it is executing "javascript:void(0);" – Michael Cruz Sep 23 '14 at 14:12
  • navigating to /assets/application.js shows that the function has been properly compiled to javascript and included, but it's not being called for whatever reason – Michael Cruz Sep 23 '14 at 14:16
  • is your new javascript funcition inside document ready? I updated my answer slightly to demonstrate it. – Marcelo Ribeiro Sep 23 '14 at 15:18
  • Well, that solved my original problem - it now is executing that javascript - thank you! Unfortunately, it's still not removing the proper fields (but my alert message added for testing DOES work - though only on the first link). I may just need to get more familiar with JQuery... – Michael Cruz Sep 23 '14 at 16:03
  • That got me somewhere, but the real problem I have now is that the partial containing the link_to renders 5 times, with 5 text_fields and 5 "remove" links - one under each field. Your code works, but eliminates all 5 text_fields, instead of just the one. I've tried using $('.fields:first').hide(), but after it hides the first field, none of the other links can be hidden, since they aren't first. – Michael Cruz Sep 24 '14 at 00:56
  • Like I said, I'm not that familiar with JQuery yet, so I'm just searching different selectors and such and trying them out at the moment... – Michael Cruz Sep 24 '14 at 00:58
  • ...and I've got it. Used this in my click event handler: $(this).parent("input").attr('value', 1) $(this).parent().parent().slideUp() Thanks for all the help! – Michael Cruz Sep 24 '14 at 01:29