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,


ld4unity free commented 4 years ago

The same error...


Mike Portman free commented 4 years ago

Try .formSelect() instead of .materialSelect


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,



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