Rails button click not firing custom JS function

Question

The following code works in jsfiddle to hide a div but not in my Rails app. In my rails app, a remote javascript call is made to show the div that I intend to hide when a Cancel button is clicked:

<form id="new_thing" class="new_thing" method="post" data-remote="true">
  <input></input>
  <input></input>

  <input class="btn btn-primary" type="submit" value="Submit" name="commit" id="fuck">
  <button id="thing_cancel" class="btn btn-primary" type="button" name="button">Cancel</button>

 </form>

The JS:

  $("#thing_cancel").click(function () {
    $('#new_thing').hide();
  });

In my app, I try:

<%= button_tag "Cancel", :class => "btn btn-primary", :type => "button", :id => "position_cancel" %>

where clicking the button does nothing. Adding :remote => true and using link_to has yielded the same result.

With, in my assets/javascripts/thing.js:

$('#thing_cancel').click(function(){
  event.preventDefault();
  $('#new_thing').hide();
  $('#new_thing_link').show();
});

I've found several somewhat related questions but nothing has worked thus far. Is there something I'm missing with the whole turbolinks thing? I have:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .    
//= require jquery.turbolinks

The gotcha with THE JS is it's positioning. You have to make sure that the script is either called on [ready](http://api.jquery.com/ready/) or after your DOM element loads, i.e., below your `button_tag` — manu29.d, Jun 22 '14 at 07:24

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

It's happening because rails 4 ships with turbolinks gem. If you look at rails guides. It says

Turbolinks will make an Ajax request for the page, parse the response, and replace the entire <body> of the page with the <body> of the response.

You need to put your js code inside application.js or a new file which is required inside application.js. To workaround turbolinks you have following options:

a. You can wrap your jquery code inside a function and then call that function on page load. If your function is myfunction then you can do:

$(document).ready(myfunction);
$(document).on('page:load', myfunction);

b. You can use jquery's live event or "on" event:

$(document).on("click","#thing_cancel",function(){
  $('#new_thing').hide();
  $('#new_thing_link').show();
});

c. You can use the jquery-turbolinks gem which will bind the Rails Turbolink events to the document.ready events so you can write your jQuery in the usual way. For more information refer to here

edited May 23 '17 at 12:27

Community

1
1

answered Jun 22 '14 at 07:35

Mandeep

9,093
2
26
36

Isn't the purpose of require tree to include all the javascripts in the assets/javascripts directory? Also, I'm already using jquery-turbolinks (required in the wrong order above but changing it to follow jquery didn't resolve it). I've also required the js file in application.js and added your code in (b) and still getting nothing. – UserDuser Jun 22 '14 at 20:50
@UserDuser you are right about require tree. Are you able to alert from your function? – Mandeep Jun 23 '14 at 02:36
Looks like it's working now. I had added `preventDefault();` to stop the submitting of the form but had changed the button_to to `type: "button" so it seems that the `preventDefault();` may have been blocking what I was actually trying to get it to do. – UserDuser Jun 23 '14 at 15:32
`$(document).on("click", "my_dom_elements", function(){...});` worked for me. – Dnyaneshwar Harer Feb 05 '20 at 11:00

Rails button click not firing custom JS function

1 Answers1