Topic: "materialChip is not a function" error

Lundberg premium asked 2 years ago


I upgrade from 4.8.9 to 4.20.0 (Pro version), and the chips stopped working. The documents for JS usage are still the same at https://mdbootstrap.com/docs/b4/jquery/javascript/tags/#javascript-usage, but running my code is according to the docs, yields an error in the console:

jquery-3.6.0.min.js:2 jQuery.Deferred exception: $(...).materialChip is not a function TypeError: $(...).materialChip is not a function

indicating that the chip functions are not available at all.Removing clutter from my script, the the essential part that is being called on my page is:

<script>
$(function() {
    $('.chips-initial1').materialChip({data:[]});

    registerChipDelete(1);
    registerChooseItem(1);
});
</script>

I do not see an issue with the inclusion of the .js files in my page, either (they're according to the example in index.html in the MDB package)


Mateusz Lazaru staff answered 2 years ago


Could you recreate this problem in a snippet or it happends just in your enviroment?


Lundberg premium commented 2 years ago

Thank you - I was testing it with a snippet, and while parsing out the relevant parts of my HTML and JS, I noticed that the call to materialChip() was actually before the inclusion of mdb.min.js on the page. (It was hard to see at first due to the page being created out of multiple templates). Moving the tag up before the function call solved the issue. Weird enough, it used to work in 4.8.9! Because the function is called inside the $(function() {} block (document is ready), I'd actually expect the code to work even if the JS is included later down the page.



Please insert min. 20 characters.

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: Premium
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.20.0
  • Device: MBP
  • Browser: newest Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes