Rails 7 JQuery Not Working, but Shows in Sources-CodePudding

I have a new Rails 7 app (using Bootstrap 5) that is having Jquery issues. For one example, I have this image gallery function that uses click() to addClass.

    $("#gallery1").click(function() {
      $(".gallery-image").removeClass("activeImg");
      $("#gallery1").addClass("activeImg");
      $(".expandedImg").addClass("hidden");
      $("#expandedImg1").removeClass("hidden");
    });
    $("#gallery2").click(function(){
      $(".gallery-image").removeClass("activeImg");
      $("#gallery2").addClass("activeImg");
      $(".expandedImg").addClass("hidden");
      $("#expandedImg2").removeClass("hidden");
    });
    $("#gallery3").click(function(){
      $(".gallery-image").removeClass("activeImg");
      $("#gallery3").addClass("activeImg");
      $(".expandedImg").addClass("hidden");
      $("#expandedImg3").removeClass("hidden");
    });
    $("#gallery4").click(function(){
      $(".gallery-image").removeClass("activeImg");
      $("#gallery4").addClass("activeImg");
      $(".expandedImg").addClass("hidden");
      $("#expandedImg4").removeClass("hidden");
    });

.hidden { display: none; }

.gallery-column {
    float: left;
    margin-bottom: 15px;
    overflow-y: hidden;
  }

  .gallery-column img {
    opacity: 0.8; 
    cursor: pointer; 
    height: 50px;
    width:  auto;
    padding-right: 10px;
  }
  
  .gallery-column img:hover, {
    opacity: 1;
  }

.activeImg {
    opacity: 1 !important;
  }

  .gallery-row:after {
    content: "";
    display: table;
    clear: both;
  }

  .gallery-container {
    position: relative;
  }

  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <img  id="gallery1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/2010-kodiak-bear-1.jpg/1200px-2010-kodiak-bear-1.jpg" alt="Nature" style="width:100%">
  </div>
  <div >
    <img  id="gallery2" src="http://img-aws.ehowcdn.com/750x500/photos.demandstudios.com/getty/article/151/79/78434875_XS.jpg" alt="Snow" style="width:100%">
  </div>
  <div >
    <img  id="gallery3" src="https://www.treehugger.com/thmb/bLC-d0nHE4IcHVwuPJwqPwoSV80=/5048x2839/smart/filters:no_upscale()/GettyImages-92417062-fdfbe3576bc94b9698d44d1ed8475a35.jpg" alt="Mountains" style="width:100%">
  </div>
  <div >
    <img  id="gallery4" src="https://kodiakbearcenter.com/wp-content/uploads/2021/03/BEARS-137-1213x1820.jpg" alt="Lights" style="width:100%">
  </div>
</div>

<div >
  <img id="expandedImg1"  style="width:100%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/2010-kodiak-bear-1.jpg/1200px-2010-kodiak-bear-1.jpg">
  <img id="expandedImg2"  style="width:100%" src="http://img-aws.ehowcdn.com/750x500/photos.demandstudios.com/getty/article/151/79/78434875_XS.jpg">
  <img id="expandedImg3"  style="width:100%" src="https://www.treehugger.com/thmb/bLC-d0nHE4IcHVwuPJwqPwoSV80=/5048x2839/smart/filters:no_upscale()/GettyImages-92417062-fdfbe3576bc94b9698d44d1ed8475a35.jpg" alt=>
  <img id="expandedImg4"  style="width:100%" src="https://kodiakbearcenter.com/wp-content/uploads/2021/03/BEARS-137-1213x1820.jpg" a>

  <div id="imgtext"></div>
</div>

It works perfectly in a JSFiddle, but on the app it yields a console error saying Uncaught ReferenceError: $ is not defined....which is the same error that I get if I remove the JQuery from the fiddle.

Here are my relevant gems:

ruby "3.0.0"
gem "rails", "~> 7.0.1"

# THE PRESETS
gem "sprockets-rails"
gem "pg", "~> 1.1"
gem "puma", "~> 5.0"
# gem "sassc-rails"
gem "importmap-rails"
gem "stimulus-rails"
gem "jbuilder"
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
gem "bootsnap", require: false

# OTHER NECESSARY STUFF
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'bcrypt', '~> 3.1.7'
gem 'gon'
gem 'sass-rails'

# ESSENTIALS
gem 'devise'
gem 'simple_form'
gem 'bootstrap', '~> 5.1', '>= 5.1.3'
gem 'friendly_id', '~> 5.2.0'
gem 'invisible_captcha'
gem 'figaro'
gem 'high_voltage', '~> 3.1'

# STYLE STUFF
gem 'font_awesome5_rails'
gem 'tinymce-rails'
gem 'jquery-matchheight-rails'

Here's my application.js:

import "controllers"
import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"


//= require jquery3
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap
//= require jquery.matchHeight
//= require activestorage
//= require font_awesome5
//= require tinymce
//= require_tree .


window.jQuery = $;
window.$ = $;

Here's config/importmap.rb:

pin "application", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

I've checked my sources tab in chrome inspector and you can see Jquery.min, jquery ujs, and popper listed in the assets folder. At this point I've removed turbolinks (or whatever the Rails 7 equivalent of it was) for a number of reasons, so at least that shouldn't be a factor.

I've even tried including a CDN version of jquery in my application.html.erb outside the asset pipeline...but it didn't change anything. Here's the current application.html.erb head:

  <head>
    <title>
      <%= if content_for?(:title) then yield(:title)   ' | ' end %>
      Website Title
    </title>
    <%= if content_for?(:head) then yield(:head) end %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application" %>
    <%= javascript_importmap_tags %>
    <%= include_gon %>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CDNs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.1.2/tinymce.min.js" integrity="sha512-cJ2vUNryvHzgNJfmFTtZ2VX5EMT5JOU1i8nm L1kwoHQ9bSqSYdswxyk  9Gi27p3BG2rXZXLMsTsluY4RZSSw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      tinymce.init({
        selector: '.tinymce'
      });
    </script>

  </head>

Can anyone see where my JQuery is messing up? I'm new to Rails 7 and completely stymied!

CodePudding user response：

This works for me...

// in app/javascript/application.js

import  jQuery  from "jquery"
let $ = window.$ = window.jQuery = jQuery

CodePudding user response：

The error you're getting isn't from jQuery itself.

At the end of your application.js you are setting these 2 variables, however the $ variable is not declared at this point. This yields the error: Uncaught ReferenceError: $ is not defined.

window.jQuery = $;
window.$ = $;

Since jQuery injects the $ and jQuery variables anyway you should just remove the two statements at the end of your application.js to make the error go away.

Check it out here, which is the same code that is executed in your application file:

window.jQuery = $;

So remove the two statements and you should be good to go.

CodePudding user response：

import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;
window.jquery = jquery;

Keep this code at the beginning of the application.js file. I was facing the same issue and this worked.