masonry is not a function

web
mobile

Topic: masonry is not a function

jouvrard pro asked 3 months ago

Hello,

I try to use the masonry functionnality of MDB, but even if I include the required JS files, I always have an error: "Uncaught TypeError: $(...).masonry is not a function"

I don't understand why because I include the required JS files, and launch the javascript after...

Here is a snippet with the same error: https://mdbootstrap.com/snippets/jquery/furax/1838854

EDIT: It seems to work with this in the snippet: https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js

But not working in my page with this:

<script type="text/javascript" src="/include/mdb/js/addons/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="/include/mdb/js/addons/imagesloaded.pkgd.min.js"></script>

Thanks,

Jerome Ouvrard


Mateusz Łubianka staff answered 3 months ago

Hi @jouvrard,

Try to place the init function into the $(document).ready function.

$(document).ready(function() {

    $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
    });
})

Best,


jouvrard pro commented 3 months ago

Hello,

The problem is the same.But I notice an other error before "Uncaught TypeError: $(...).masonry is not a function", which is:"Uncaught SyntaxError: Unexpected token '<'" in "masonry.pkgd.min.js:1"

The problem may be in the masonry.pkgd.min.js file?

EDIT> I tried to download the original file at https://masonry.desandro.com/, but the problem is still the same... It work only with " https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"

EDIT2> That' really strange... If I use the dist file, it works, but if I download it and use it directly, I have the error.

EDIT3> Hmmm... I'm really sorry, the error comes from me... If I don't put a "/" before the file path, I have this error, but with it it works... Sorry.


Mateusz Łubianka staff commented 3 months ago

So does it work fine now?

Best,


jouvrard pro commented 3 months ago

Yes, I don't know why because it the only script in my develoment who need a "/" before the path. But it works yes. :)


Mateusz Łubianka staff commented 3 months ago

I'm glad everything works fine :)

Best,


I had to make an account, looks like my previous reply was lost.

Anyway I'm having the same issue. URLs are correct. Using vue, and the masonry() function is called inside my component's mounted method.


Mateusz Łubianka staff commented 2 months ago

Hi @yellowbusmarine,

This is the jQuery support forum. Here you can find help for vue version: https://mdbootstrap.com/support/cat/vue/

Best,


yellowbusmarine commented 2 months ago

Ah, ok. I figured since the OP had this exact issue this was an appropriate place to report I was having it also. I'm NOT using vue-mdb, in case that wasn't clear.


Mateusz Łubianka staff answered 2 months ago

@yellowbusmarine,

Ok, I'll try to help you. I checked it in MDB 4.15.0 and it works well without any errors. Did you import all necessary js files?

<!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <script type="text/javascript" src="js/addons/masonry.pkgd.min.js"></script>
  <script type="text/javascript" src="/js/addons/imagesloaded.pkgd.min.js"></script>

And below:

<!-- Your custom scripts (optional) -->
  <script type="text/javascript">
    $(document).ready(function () {

      $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 160,
        gutter: 20
      });
    })
  </script>

This is in standard html and js/jquery project.

Best,


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.14.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes
Tags