Topic: masonry is not a function
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
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 5 years 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 5 years ago
So does it work fine now?
Best,
jouvrard pro commented 5 years 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 5 years 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 5 years 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 5 years 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.
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,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.14.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes