masonry is not a function

Topic: masonry is not a function

jouvrard pro asked 4 years 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

Add comment

Mateusz Łubianka staff answered 4 years ago

0 0 Best answer

<p><a href="/profile/?id=101163" target="_blank" rel="nofollow">@yellowbusmarine</a>,</p>

<p>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?</p>

<p>And below:</p>

<pre class="prettyprint"><code>
  <script type="text/javascript">
    $(document).ready(function () {

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

<p>This is in standard html and js/jquery project. </p>

Please insert min. 20 characters.

@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,

Add comment

yellowbusmarine free answered 4 years ago

0 0 Best answer

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 4 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 free commented 4 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.

Add comment

Mateusz Łubianka staff answered 4 years ago

0 0 Best answer

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 4 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.

Please insert min. 15 characters.

Mateusz Łubianka staff commented 4 years ago

So does it work fine now?

Best,

jouvrard pro commented 4 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 4 years ago

I'm glad everything works fine :)

Best,

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

jouvrard

Pro User 898Support score
46Questions 70Answers 11Snippets