Question 37053 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Rails 7 JQuery Not Working, but Shows in Sources

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 class="gallery-row">
  <div class="gallery-column">
    <img class="gallery-image" 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 class="gallery-column">
    <img class="gallery-image" 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 class="gallery-column">
    <img class="gallery-image" 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 class="gallery-column">
    <img class="gallery-image" id="gallery4" src="https://kodiakbearcenter.com/wp-content/uploads/2021/03/BEARS-137-1213x1820.jpg" alt="Lights" style="width:100%">
  </div>
</div>

<div class="gallery-container">
  <img id="expandedImg1" class="expandedImg" 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" class="hidden expandedImg" style="width:100%" src="http://img-aws.ehowcdn.com/750x500/photos.demandstudios.com/getty/article/151/79/78434875_XS.jpg">
  <img id="expandedImg3" class="hidden expandedImg" style="width:100%" src="https://www.treehugger.com/thmb/bLC-d0nHE4IcHVwuPJwqPwoSV80=/5048x2839/smart/filters:no_upscale()/GettyImages-92417062-fdfbe3576bc94b9698d44d1ed8475a35.jpg" alt=>
  <img id="expandedImg4" class="hidden expandedImg" 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!

Tags:

3

Answers


  1. 0

    This works for me…

    // in app/javascript/application.js

import  jQuery  from "jquery"
let $ = window.$ = window.jQuery = jQuery
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0 
    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search