Why is jQuery not working in my rails 5 app?

300
June 22, 2017, at 08:53 AM

I am trying to write my first js code in my new Rails5 app and cannot seem to get Jquery to work, guessing it's a config/environment issue but despite all my searching and confirg alterations I cannot seem to get it running. Can anyone see what it is that I'm doing wrong?:

gemfile;

 # Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'

application.html.erb;

<title>MyEngine</title>
<!-- Gon::Base.render_data -->
<%= Gon::Base.render_data %>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

new.html.erb;

<%= link_to 'Remove Employee', '#', id: 'hide-employee' %>

quotes.coffee;

$(document).on "page:change", ->
    $('#hide-employee').click ->
        alert "Clicked!"

And no alert when clicked. No errors, server running and page rendering fine, just nothing in console.

Thanks for the help.

Answer 1

The page:change event is defined in turbolinks-classic. This version is now deprecated like you can see by yourself.

Instead, you can use turbolinks:load or turbolinks:render or turbolinks:before-render.

Answer 2

Try using turbolinks:load instead.

$(document).on 'turbolinks:load', ->
  $('#hide-employee').click ->
    alert 'Clicked!'
Answer 3

Make sure you're app/assets/javascripts/application.js contains:

//= require jquery
//= require jquery-ujs

Note: If you're using Rails 5.1 you can omit //= require jquery_ujs in favor of //= require rails-ujs.

Also, consider removing turbolinks entierly. Doing so has resolved more asset pipeline issue than I care to count. I have a feeling it's not providing you much value anyway. :-)

Remove turbolinks with:

  1. Remove turbolinks from the Gemfile and $ bundle.
  2. Remove //= require turbolinks from app/assets/javascripts/application.js
  3. Remove both of the "data-turbolinks-track" => true hashes from app/views/layouts/application.html.erb.
Rent Charter Buses Company
READ ALSO
Get data from API and seperate it into variables with jQuery

Get data from API and seperate it into variables with jQuery

I'm trying to request data and then populate 9 different P tags with the relevant attributes only I'm struggling with how to do it

310
Loading huge amount of data in Multiple Tabs (3) using jQuery

Loading huge amount of data in Multiple Tabs (3) using jQuery

In my app, I have to load data from MySQL using jQueryThe amount of data is huge

257
How to add numbers to thumbnails in a jQuery slider?

How to add numbers to thumbnails in a jQuery slider?

I need to show numbers on thumbnails, in the slider on my product page

331
jQuery Toggle is allowing no content

jQuery Toggle is allowing no content

I am working on toggling three divs based on a menu of three links

269