Topic: jQuery with perfect-scrollbar
meesha81 priority asked 2 years ago
Based on documentation example: https://mdbootstrap.com/docs/standard/methods/scrollbar/#docsTabsAPI
Expected behavior Be able to use function as documentated.
Actual behavior
Uncaught TypeError: $(...).perfectScrollbar is not a function
Resources (screenshots, code snippets etc.)
This is script usage order, mdb as full 701kB file
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/mdb.min.js"></script>
<script src="js/custom.js"></script>
Usage in custom.js
$('.perfect-scrollbar-enable').perfectScrollbar(options);
Grzegorz Bujański staff answered 2 years ago
Try to init Perfect Scrollbar inside document ready function:
$(document).ready(() => {
$('.perfect-scrollbar-enable').perfectScrollbar(options);
})
meesha81 priority commented 2 years ago
Not working... I am not sure that Bootstrap 5 (clean JS) version can be used with jQuery as described in documentation. Maybe only Bootstrap 4 (jQuery) version can be used this way. What do you think? Should it works with bootstrap 5 (vanilla JS) version of MDB?
Grzegorz Bujański staff commented 2 years ago
Init via jQ works too. See this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4493845#js-tab-view In what order do you import jQ and MDB? First jQ then MDB? jQ must be imported first. Do you have any errors in your console?
meesha81 priority commented 2 years ago
Hi, thank you for information. It is working now. I am not sure where was something strange, maybe something with browser cache, I cannot explain it but it is working now. It can be initialized by jQuery now.
Only for my confirmation: Am I right that 'update' method cannot be run via jQuery and have to be called via clean javascript?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: PC
- Browser: Chrome 106
- OS: win11
- Provided sample code: No
- Provided link: Yes