Ask A Question

Notifications

You’re not receiving notifications from this thread.

Webpacker noob - so I saw your video and im using rails 6

Gus P asked in Rails

how does one go by installing https://github.com/metafizzy/isotope with webpacker?

yarn add isotope-layout
require('isotope-layout')

now I get an error

      .col-md-9
        .entry-content.mb-5
          - @staff.each do |faculty|
            .card-wrapper
              - if faculty.profile.attached?
                = link_to image_tag(url_for(faculty.profile)), '#', class: 'card-img-top'
              .card-text-area
                = link_to "#" do
                  %p.card-text
                    %i
                      = faculty.staff_title
                  %h5.strong
                    = faculty.title

:javascript
  $('.entry-content').isotope({
    // options
    itemSelector: '.card-wrapper',
    layoutMode: 'fitRows',
    percentPosition: true,
    gutter: 10
  });

(index):311 Uncaught TypeError: $(...).isotope is not a function
    at (index):311
Reply

I checked to see if isotope was there in the pack_tag its there am I missing something?

Reply
Reply

Figured it out

application.js

var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');

jQueryBridget( 'isotope', Isotope, $ );

Sheesh !

Reply
Join the discussion
Create an account Log in

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

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

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

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

    © 2023 GoRails, LLC. All rights reserved.