Topic: "materialChip is not a function" error
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)
Could you recreate this problem in a snippet or it happends just in your enviroment?
Lundberg pro 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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