Jquery not working after upgrading from rails '4.1.2' to rails '8.0.1'

I can't find what the problem is with Jquery not working on my app, Even a simple hide/show logo $( "#logo" ).hide() / $( "#logo" ).show() on Chrome console is raising the error Uncaught TypeError: $(...).show is not a function.

I am using:

gem 'jquery-rails'
gem 'turbo-rails'
gem 'jquery-ui-rails'

In app/views/layouts/application.html.erb I have changed the lines:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

<%= stylesheet_link_tag :application, media: 'all', "data-turbo-track" => true %>
<%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %>

And in app/assets/javascripts/application.js, I have the following lines:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require underscore
//= require turbo
//= require_tree .

In app/assets/config/manifest.js:

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js

UPDATE: We installed import maps doing the following:

# bin/bundle add importmap-rails
# bin/rails importmap:install
# bin/importmap pin react react-dom
# node --version
v18.19.1
# sudo apt install npm
# sudo npm install --global yarn

Then we added this to the header section of application.html.erb:

<%= javascript_importmap_tags %>

and commented out the old javascript include tag line

However, we still get the same error.

UPDATE 2:

We have the following content in the files below:

In app/views/layouts/application.html.erb"
...
  <head>
    <title>Numbe Accounting</title>
    <%= stylesheet_link_tag :application, media: 'all', "data-turbo-track" => true %>
    <%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %>
    <%= javascript_importmap_tags %>
    <%= csrf_meta_tags %>
  </head>
...

In app/javascript/application.js:

import "jquery"
import "jquery_ujs"
import "jquery-ui"
//import React from "react"
//import ReactDOM from "react-dom"
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
// require jquery-ui.tabs
// require jquery-ui.button
// require jquery-ui.datepicker
// require jquery-ui.accordion
//= require underscore
// require jquery.turbolinks
//= require turbo
//= require_tree .

In config/initializers/assets.rb:

# Be sure to restart your server when you modify this file.

Rails.application.config.assets.version = '2.0'
# Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js )

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )

In app/assets/config/manifest.js:

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link jquery.min.js
//= link jquery_ujs.js

We get no errors in log/development.log, but certain aspects of the app clearly don't load. For example:

Should look like this:

What else could we be missing?

I am using:

gem 'jquery-rails'
gem 'turbo-rails'
gem 'jquery-ui-rails'

In app/views/layouts/application.html.erb I have changed the lines:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

<%= stylesheet_link_tag :application, media: 'all', "data-turbo-track" => true %>
<%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %>

And in app/assets/javascripts/application.js, I have the following lines:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require underscore
//= require turbo
//= require_tree .

In app/assets/config/manifest.js:

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js

UPDATE: We installed import maps doing the following:

# bin/bundle add importmap-rails
# bin/rails importmap:install
# bin/importmap pin react react-dom
# node --version
v18.19.1
# sudo apt install npm
# sudo npm install --global yarn

Then we added this to the header section of application.html.erb:

<%= javascript_importmap_tags %>

and commented out the old javascript include tag line

However, we still get the same error.

UPDATE 2:

We have the following content in the files below:

In app/views/layouts/application.html.erb"
...
  <head>
    <title>Numbe Accounting</title>
    <%= stylesheet_link_tag :application, media: 'all', "data-turbo-track" => true %>
    <%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %>
    <%= javascript_importmap_tags %>
    <%= csrf_meta_tags %>
  </head>
...

In app/javascript/application.js:

import "jquery"
import "jquery_ujs"
import "jquery-ui"
//import React from "react"
//import ReactDOM from "react-dom"
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
// require jquery-ui.tabs
// require jquery-ui.button
// require jquery-ui.datepicker
// require jquery-ui.accordion
//= require underscore
// require jquery.turbolinks
//= require turbo
//= require_tree .

In config/initializers/assets.rb:

# Be sure to restart your server when you modify this file.

Rails.application.config.assets.version = '2.0'
# Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js )

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )

In app/assets/config/manifest.js:

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link jquery.min.js
//= link jquery_ujs.js

We get no errors in log/development.log, but certain aspects of the app clearly don't load. For example:

Should look like this:

What else could we be missing?

Share Improve this question edited Feb 3 at 14:14 Lifeboy 2012 silver badges9 bronze badges asked Feb 1 at 12:05 Malcom Pablice 113 bronze badges

on the import maps version, were the other files also updated? It would be cool if you could edit the question to also share the contents for importmap.rb, app/javascript/application.js, and config/initializers/assets.rb) – lmtaq Commented Feb 3 at 10:37
The second update seems to be a different issue. That one seems to be related to your stylesheets, no relation with jquery anymore. You might want to check stackoverflow/questions/74008891/… – lmtaq Commented Feb 3 at 16:59
1 make sure not to have both app/javascript/application.js and app/assets/javascripts/application.js as one will override the other, depending on the order of assets paths. – Alex Commented Feb 3 at 18:31
Correct, @Alex, we removed app/assets/javascripts/application.js. – Lifeboy Commented Feb 4 at 7:58
It seems that the app doesn't have access to the javascripts. The gems are installed into the .rvm folder and I suspect that importmaps only looks in the tree structure of the app root and not in $GEM_PATH and $GEM_HOME. The development.log doesn't show errors, but when we inspect execution in the browser, we can see that the javascripts are not being found. Specifically javascrip-ui-tabs and javacript-ui-accordion are not found. This is reflected in the screen shots I added under UPDATE 2. – Lifeboy Commented Feb 4 at 8:06

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

It looks like you're relying on jquery-rails docs, which are not up-to-date with the latest Rails versions regarding Javascript modules import.

Since Rails 7, those can be handled through Import maps.

You can find the detailed instructions for JQuery Rails on this issue in their repo. Those are based on Rails 7, and it should still work on Rails 8 too.

Quoting Github user jubilee2 suggestion on that that issue:

edit application.js

// app/javascript/application.js
// jquery
import 'jquery'
import 'jquery_ujs'

edit importmap.rb

# config/importmap.rb

pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true

edit config/initializers/assets.rb:

# config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( jquery.min.js
jquery_ujs.js )

Just keep in mind in your case, you'll also need to adapt your changes in app/views/layouts/application.html.erb to the new approach with:

<%= javascript_importmap_tags %>

Also, note that the lack of maintenance of jquery-rails might be an indicator of other issues you're likely to bump into soon. Consider migrating away from jQuery to other alternatives if you can.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Jquery not working after upgrading from rails '4.1.2' to rails '8.0.1' - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)