All threads / $container.isotope is not a function ruby on rails
Ask A Question

Notifications

You’re not receiving notifications from this thread.

$container.isotope is not a function ruby on rails

Owen asked in Javascript

I’ve managed to install a theme in my Rails app now. However, there’s still some bugs in the js.

Uncaught TypeError: $container.isotope is not a function
windowLoadInit main.js:1358
jQuery 2
windowLoadInit main.js:1354
js main.js:1554
jQuery 2
main.js:1358

From my application.js I’m loading all the js files that came with the theme.

require('./vendor/affix')
require('./vendor/bootstrap-progressbar.min')
require('./vendor/bootstrap.bundle')
require('./vendor/html5shiv.min.js')
require('./vendor/isotope.pkgd.min')
require('./vendor/jflickrfeed.min')
require('./vendor/jquery-3.3.1.min')
require('./vendor/jquery-migrate-3.0.0.min')
require('./vendor/jquery.appear')
require('./vendor/jquery.cookie')
require('./vendor/jquery.countdown.min')
require('./vendor/jquery.countTo')
require('./vendor/jquery.easing.1.3')
require('./vendor/jquery.easypiechart.min')
require('./vendor/jquery.flexslider-min')
require('./vendor/jquery.hoverIntent')
require('./vendor/jquery.localScroll.min')
require('./vendor/jquery.parallax-1.1.3')
require('./vendor/jquery.prettyPhoto')
require('./vendor/jquery.scrollbar.min')
require('./vendor/jquery.scrollTo.min')
require('./vendor/jquery.ui.totop')
// require('./vendor/modernizr-2.6.2.min')
require('./vendor/owl.carousel.min')
require('./vendor/photoswipe')
// require('./vendor/photoswipe-ui.default.min')
// require('./vendor/respond.min')
require('./vendor/spectragram.min')
require('./vendor/superfish')
require('./bootstrap.addons')
require('./compressed')
require('./main')

The bug is related to isotope.pkgd.min and is being caused inside main.js .

// init Isotope
$('.isotope-wrapper').each(function(index) {
var $container = $(this);
var layoutMode = ($container.hasClass('masonry-layout')) ? 'masonry' : 'fitRows';
var columnWidth = ($container.children('.col-md-4').length) ? '.col-md-4' : false;
$container.isotope({
percentPosition: true,
layoutMode: layoutMode,
masonry: {
//TODO for big first element in grid - giving smaller element to use as grid
// columnWidth: '.isotope-wrapper > .col-md-4'
columnWidth: columnWidth
}
});

On line main.js:1358 the isotope method is being called on $container ($container.isotope({…) and the error is saying that $container isn’t a function. I’ve been Googling for an answer, but have so far not found something that could help me.

I've solved the problem by using the compressed.js file (which has all the invididual js files compressed into one) instead the individual files. Even though the error is still visible in the inspector all the js on the website is working, so that's enough for the moment.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 66,029+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.