jquery drop down hover

I got this dropdown hover script working on my local pc, unfortunately when push it to github and build it on heroku it doesn’t work :frowning:

It’s not a big deal, but it seems odd that’s all. I’ll be replacing ckeditor with a nice jquery wysiwyg editor (so hoping that works too).

ok, well I guess JQuery is not running on my production site, but seems to load and run locally…

I ran console.log(jQuery.fn.jquery);
(which checked the jquery version in the browsers console) and 3.3.1 on the development, 1.12.4 on the production. I would imagine that’s what’s wrong, now why?

If your production server is serving JQuery make sure it’s the correct version on that server. If source is from somewhere else make sure the Production server’s code has the correct URL and double check your load order for all JS assets.

ok, here’s my application.js

// This is a manifest file that’ll be compiled into application.js, which will include all the files

// listed below.


// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,

// or any plugin’s vendor/assets/javascripts directory can be referenced here using a relative path.


// It’s not advisable to add code directly here, but if you do, it’ll appear at the bottom of the

// compiled file.


// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details

// about supported directives.


//= require jquery

//= require jquery_ujs

//= require turbolinks

//= require bootstrap-sprockets

//= require ckeditor/config

//= require lightbox

//= require rails.validations

//= require rails.validations.simple_form

//= require_tree .


and here are my javascript files …

rw-r–r-- 1 joe joe 814 Apr 2 15:40 application.js

-rw-r–r-- 1 joe joe 9353 Nov 6 19:39 bootstrap-dropdownhover.js

-rw-r–r-- 1 joe joe 6787 Nov 6 19:39 bootstrap-dropdownhover.min.js

-rw-r–r-- 1 joe joe 5425 Aug 9 2018 bootstrap-hover-dropdown.old

-rw-r–r-- 1 joe joe 211 Aug 9 2018 carts.coffee

-rw-r–r-- 1 joe joe 211 Aug 9 2018 categories.coffee

-rw-r–r-- 1 joe joe 211 Aug 9 2018 category.coffee

drwxr-xr-x 2 joe joe 4096 Aug 9 2018 ckeditor

-rw-r–r-- 1 joe joe 211 Oct 25 10:14 invoicing.coffee

-rw-rw-r-- 1 joe joe 86927 Mar 29 14:52 jquery-3.3.1.min.js

-rw-r–r-- 1 joe joe 253669 Aug 9 2018 jquery-ui.min.js

-rw-r–r-- 1 joe joe 45 Aug 9 2018 js.coffee_old

-rwxr-xr-x 1 joe joe 18410 Aug 9 2018 lightbox.js

-rw-r–r-- 1 joe joe 211 Aug 9 2018 notifications.coffee

-rw-r–r-- 1 joe joe 211 Aug 9 2018 pages.coffee

-rw-r–r-- 1 joe joe 211 Aug 9 2018 photos.coffee

-rw-r–r-- 1 joe joe 211 Aug 9 2018 products.coffee

-rw-r–r-- 1 joe joe 22281 Nov 1 11:38 rails.validations.js

-rw-r–r-- 1 joe joe 1831 Nov 1 11:38 rails.validations.simple_form.bootstrap4.js

-rw-r–r-- 1 joe joe 1912 Nov 1 11:38 rails.validations.simple_form.js

-rw-r–r-- 1 joe joe 211 Aug 9 2018 transactions.coffee

-rw-r–r-- 1 joe joe 211 Aug 9 2018 users.coffee


Make sure you have the gem bootstrap sass could help

No, that’s in the gem file…

I even tried adding the jquery right to the application.erb from the Jquery CND…

Still loads 1.12.4, no idea where it’s getting it from. (or why 3.3.1 isn’t loading).

What version of Rails do you use?

Have you checked your gem file and whats in application.js?

It sounds to me like something isn’t nailed down to a specific version of jQuery so your latest dev builds just go grab whatever latest version they can find but your Production machine hasn’t had to do this process in some time.

In the Gemfile for the main Rails app I support, we have lines for

gem 'jquery-rails’

gem 'jquery-ui-rails’

and this is what actually prepares the server running the app with some version of jQuery. You probably have something similar and that gem might need to be updated on your production server (or specified more narrowly in your Gemfile so your dev builds grab older versions of jQuery). You can check the Gemfile.lock for specific version ranges of whatever gem is responsible for your jQuery.

If it’s not a Gem that does this then you need to figure out how you got jQuery onto your production server, how it gets there on your dev machine builds, and how to stop your dev builds from grabbing a different version.

I have the following…

gem ‘jquery-rails’, ‘~> 4.3’, ‘>= 4.3.1’
gem ‘jquery-ui-rails’, ‘~> 6.0’, ‘>= 6.0.1’

and I’ve looked at my heroku console, and did a gem list, it says I have the latest jquery stuff…

jquery-rails (4.3.3)

jquery-ui-rails (6.0.1)

my gem.lock file is ok too.

jquery-rails (4.3.3)

jquery-ui-rails (6.0.1)

Is there any way in the browser console (or debugger to figure out what’s loading and when?)

I feel it’s related to turbolinks again, lol, always seems to be an issue with turbolinks.

Is there any way in the browser console (or debugger to figure out what’s loading and when?)

Show the function definition of a registered event listener on any node

my rails app is versio 5.0.7.

I did change //= jquery to //=jquery3 (and it loaded jquery 3.3.1 in the production environment on heroku).

so that wasn’t the issue, it’s just that my jquery scripts don’t seem to run :frowning:

my rails app is versio 5.0.7.

I did change //= jquery to //=jquery3 (and it loaded jquery 3.3.1 in the production environment on heroku).

so that wasn't the issue, it's just that my jquery scripts don't seem to run :frowning:

One thing that I haven't heard about from you is whether they run in production mode anywhere else. Can you try running in production mode on your dev machine?

RAILS_ENV=production rake assets:precompile
RAILS_ENV=production rake db:migrate
rails s production

See if your scripts run okay there. If they do, then check that you are precompiling assets on your production server. (I am pretty sure that a heroku deploy will take care of all that automagically, but I haven't used it in several years, and I may have forgotten.)

If the problem was turbolinks, you would have seen that problem everywhere, in every environment. The usual way to fix that (if it's the reason) is to ensure that your scripts that run in the head of the page are properly listening for the turbolinks events, not page load, because the page load happens exactly once (when your first page loads) -- and never again -- in a turbolinks application. So anywhere you were using $.ready(), you would use $(document).on('turbolinks:load', function(evt){ /* your script here */ }); You can also just put any scripts that need access to the updated body in the very bottom of your layout, just inside the closing </body> tag.


I’ll try to run it in production mode. I guess I’ll need to install PostgreSQL on the development machine.

Ok, I removed all the references to Ckeditor and I got the dropdown hover to work on the inital load. {which is great}

But, on other pages, the hover doesn’t work. I’ve got to see exactly how I loaded it up.

I even removed the dropdown hover jquery scripts. I don’t believe they work in mobile (responsive) mode. lol