1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Select is not working at all!

alvintng pro asked 6 years ago

Hi, when I input the code snippet into my HTML, only the label renders, please help! Thank you.

luthersites pro answered 6 years ago

I just updated to 4.5.9 and now my Select items aren't working/showing anywhere.  I re-read the instructions for initializing these elements and noticed that the initialization changed from (if I remember material-select to materialSelect.  When I looked through the JS module for materialSelect, I don't see any function materialSelect, but I see MaterialSelect everywhere. My current initialization, per instructions, is: 
$(function(){
     $('.mdb-select').materialSelect();
});
The console log says that there is no function materialSelect, or when I change to MaterialSelect, it also says that there is no such function.  So I'm confused.  What is the correct initialization and why is the log saying that it can't find any of these functions?  I'm using the minified version of mdb pro 4.5.9, what I downloaded from my order history page just moments ago.

luthersites pro commented 6 years ago

FYI: When I load the material-select.js file after mdb.min.js, then MaterialSelect() initializes. I'll leave it like this for now, but please provide a fix so I can rely on the packed version in mdb.min.js.

Piotr Glejzer staff commented 6 years ago

Hi, may you show me your code HTML ? I just downloaded latest version from FTP and I put material select initialized to script tag in MDB Pro and everything is working perfectly. Best, Piotr

arumcomputer free commented 4 years ago

I am having nearly the same issue with 4.10.1 and Laravel. The mdb-select is set to display none and the call $('.mdb-select').materialSelect(); does not work: TypeError: $('.mdb-select').materialSelect is not a function. (In '$('.mdb-select').materialSelect()', '$('.mdb-select').materialSelect' is undefined) I just don't get it to work properly. Do you have an idea?

lemons free commented 4 years ago

double check you included the js files properly (1. jquery, 2. bootstrap, 3. mdb). Then wrap the initializations in the $(document).ready(function(){ /* initialize here -> */ $('.mdb-select').materialSelect(); });

arumcomputer free commented 4 years ago

Thanks for your reply. I included the scripts like that:

<script src="{{ asset('js/mdb/jquery.min.js') }}"></script>
<script src="{{ asset('js/mdb/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/mdb/mdb.min.js') }}"></script>
<script src="{{ asset('js/app.js') }}" defer></script>

In my app.js I am including a custom.js file and in it I am doing the initialization within the document ready function.

arumcomputer free commented 4 years ago

Maybe it is a Laravel special. I am using Webpack and mix to compile my app.js and the included files. Maybe there is a special way I need to include MDB into my Laravel app.

lemons free commented 4 years ago

What is the browser console saying? The latest mdb pack isnt working with webpack mixins in laravel. As temporary solution I simply made a scripts.blade.php file including the script files tags linked to the public directory. I just compile the scss with mixins. The scripts.blade.php I include in my main view template which gets extended by all other views. Hope mixins will work again with next release.

arumcomputer free commented 4 years ago

Thanks @lemons, I also noticed, that the JS is not working with Webpack. So I added the files directly to my public/js directory an included them like I mentioned earlier. The console says nothing except the error I already mentioned: TypeError: $('.mdb-select').materialSelect is not a function

Does the materialSelect work with your Laravel Project?

I would be so happy as well, when Webpack works...

Mateusz Łubianka staff commented 4 years ago

Hi,

If you include all necessary files and do the initialization within the document ready, it should work. The problem is probably related with Laravel. Our team work to fix this issue.

Best,

lemons free commented 4 years ago

I have no issues using any mdb js components in laravel so far (without webpack).Try to put your js directly in a script tag in your views (or by blade include so you have a seperate file). I assume this behaviour is caused by using webpack with your own js, as long as you wrapped your js in $(document).ready()

Mateusz Łubianka staff commented 4 years ago

Yes, the issue is related with Laravel and webpack integration. Our team still work to solve this issue.

Best,

alvintng pro answered 6 years ago

Hi any update on the bug? Its still not working even with the suggested amendments.

Piotr Glejzer staff commented 6 years ago

Hi, Yes, we will update it next week (13th/14th August). By the way, this fix is working well. If you will go to Multi and press F12 you will show a massege in console 'icon_url is not defined'. That means it does not exist. If you changed how I suggested that it should be work for 100%. You have to use gulp to change in material select to compile material-select.js to mdb.js and mdb.min.js or you can change it manually in mdb.min.js. (we use min version in our HTML files) or you can just wait for our global fix in 4.5.9 version. If you have more questions I'm here to help you. Best, Piotr

Piotr Glejzer staff answered 6 years ago

We are very sorry but we have a bug in material select. We have a fix for you! We will fix it globally in next release. This fix is easy and fast.

You need to find your material-selecjt.js file.
Next, you need to go to 160 line in material select.
Change icon_url to iconUrl !

It should look like that :


if (iconUrl) {

 var classString = '';
 if (classes) {

 classString = ' class="' + classes + '"';
 }

 if (type === 'multiple') {

 options.append($('<li class="' + disabledClass + '"><img alt="" src="' + iconUrl + '"' + classString + '><span class="filtrable"><input class="form-check-input" type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'));
 } else {

 options.append($('<li class="' + disabledClass + optgroupClass + '"><img alt="" src="' + iconUrl + '"' + classString + '><span class="filtrable">' + option.html() + '</span></li>'));
 }

We are very sorry again about that bug.

Best,
Piotr

alvintng pro commented 6 years ago

no worries! thank you!

alvintng pro commented 6 years ago

Hi Piotr, I've changed the code both in material-select.js and mdb.js files - the select still does not render at all only the label renders

alvintng pro commented 6 years ago

Hi Piotr, I've changed the code both in material-select.js and mdb.js files - the select still does not render at all only the label renders

Marta Wierzbicka staff answered 6 years ago

Hi, please update your package to the newest version of MDB - 4.5.8. Best, Marta

alvintng pro commented 6 years ago

Hi I've updated and it's still the same - only the label renders.
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
alvintng
Pro User 50Support score
11Questions 5Answers 0Snippets