Topic: materialSelect Not a function
ld4unity free asked 4 years ago
Hi,
I have a laravel project. I use npm for sass and js compiler.
Now i require the files :
window.$ = window.jQuery = require('jquery');
require('./../../node_modules/mdbootstrap-pro/js/bootstrap.js');
require('./../../node_modules/mdbootstrap-pro/js/mdb.js');
And in my index.blade.php, i have
$(document).ready(function() {
$('.mdb-select').materialSelect();
});
Now i the get the error:
Uncaught TypeError: $(...).materialSelect is not a function
If i call the function in de console(of chrome). I get the same error.
What is wrong?
Kind Regards,
maxk priority answered 2 years ago
How does this link helps anything https://gist.github.com/PabloCamp0s/a22b810af012d6110e98cb7539e96484#file-material-design-bootstrap-js. Can someone please explain how to fix this? Thank
Marcin Luczak staff commented 2 years ago
This gist is supposed to import all components from the MDB resources directly to your app file, which should be helpful if you are using webpack and you don't want to recompile index.min.js file.
If you are having problems with material select, please describe it, with code snippet preferably and I'll try to help.
Keep coding, Marcin
maxk priority commented 2 years ago
@Marcin Luczak I've cloned this repo: https://github.com/mattmilan/mdb_rails and added the pro files to it. The Select fields loads as expected however I am still getting the error Uncaught TypeError: $(...).materialSelect is not a function
. Why am I able to see the field correctly but materialSelect doesn't exist?
Marcin Luczak staff commented 2 years ago
Hi,
This is not our official package so I can't really tell what is causing your problems. The general rule for the Material Select and all dynamic components in the MDB package is to import all necessary files into your app, check if they are loaded to the page by your scripts/webpack configuration/other bundlers, and make sure you init those components after all scripts are loaded into to page. For jQuery application is common to use Material Select inside the
$( document ).ready(function() {
// use components
});
wrapper.
Nassim7 free answered 4 years ago
I have the same problem. I tried
$('.mdb-select').formSelect()
And I get the same message. Please advise.
The examples on your website use
$('.mdb-select').materialSelect();
Grzegorz Bujański staff commented 4 years ago
Hi. You should use $('.mdb-select').materialSelect();
. Is only select not working or other functions (e.g. Sidenav) too? What does your Webpack config look like? Do you have any errors during compilation or after page load?
RichardT premium commented 4 years ago
I have the same problem, Sidenav is working fine, materialSelect isn't.
Grzegorz Bujański staff commented 4 years ago
I need more information to figure out why this doesn't work. Do you have any errors in your console? How do you initialize select? Are you doing this inside document ready function? It would be great if you create a snippet in which I can recreate this bug.
RichardT premium commented 4 years ago
I'm using Rails 6 and Webpacker and I have included the pro version with a javascript include tag (like: script src="/js/mdb.min.js" ) so that webpacker won't compile the javascript which would give me an error (Cannot assign to read only property 'exports' of object '#').Both putting the materialSelect() in a script right after the select itself and in the $(function(){}) will give me the error: materialSelect is not a function.Hope this helps
Grzegorz Bujański staff commented 4 years ago
At the moment, if you add our library to a framework that uses a webpack, it is necessary to add individual modules from the src folder. This can be helpful when configuring: https://gist.github.com/PabloCamp0s/a22b810af012d6110e98cb7539e96484#file-material-design-bootstrap-js
RichardT premium commented 4 years ago
That works! Thanks
Grzegorz Bujański staff commented 4 years ago
Great, I'm glad it helped you solve your problem.
ld4unity free answered 4 years ago
Ah, i get the following error:
TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
at Object.<anonymous> (app.js?id=ea2971a7b78046d64f91:45071)
at Object../node_modules/mdbootstrap-pro/js/mdb.js
Mateusz Łubianka staff commented 4 years ago
Hi @ld4unity,
The problem only occurs with select?
Best,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.15.0
- Device: Levono T480
- Browser: chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
ld4unity free commented 4 years ago
The same error...
Mike Portman free commented 4 years ago
Try .formSelect() instead of .materialSelect