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 or after your DOM element loads, i.e., below your button_tag — manu29.d
– manu29.d, Commented Jun 22, 2014 at 7:24

Community · Accepted Answer · 2017-05-23 12:27:10Z

3

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, 2017 at 12:27

CommunityBot

11 silver badge

answered Jun 22, 2014 at 7:35

Mandeep

9,1832 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

UserDuser Over a year ago

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.

Mandeep Over a year ago

@UserDuser you are right about require tree. Are you able to alert from your function?

UserDuser Over a year ago

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.

Dnyaneshwar Harer Over a year ago

$(document).on("click", "my_dom_elements", function(){...}); worked for me.

Collectives™ on Stack Overflow

Rails button click not firing custom JS function

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related