Materialize css select not working with JS errors
Solution 1
Materialize is built using jQuery. In this part of your code:
= javascript_include_tag 'http://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js'
= javascript_include_tag 'http://code.jquery.com/jquery-2.1.2.min.js'
You're loading the Materialize plugins before you load jQuery itself. Switch the order of those two lines.
Solution 2
Maybe the problem is caused by the version becoming obsolete. I use
=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
=https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js
$(document).ready(function(){
$('select').material_select();
});
So it works
Solution 3
The newer jQuery way to initialize a select dropdown is with
$(document).ready(function(){
$('select').formSelect();
});
Petr
Updated on June 24, 2022Comments
-
Petr almost 2 years
I have an issue with select form using Materialize css framework. This is my form:
<div class="input-field col s12"> <select multiple> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label>Materialize Multiple Select</label> </div> <script src="//code.jquery.com/jquery-2.1.2.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> <script> $('select').material_select(); </script>
This is my layout in slim:
doctype html html head meta content=("text/html; charset=UTF-8") http-equiv="Content-Type" / title Budeprace = stylesheet_link_tag 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css', media: 'screen,projection' = stylesheet_link_tag 'http://fonts.googleapis.com/icon?family=Material+Icons' = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags meta content="width=device-width, initial-scale=1.0" name="viewport" body .container - flash.each do |key, value| div class=("text-center #{flash_class(key)}") = value = yield = javascript_include_tag 'http://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js' = javascript_include_tag 'http://code.jquery.com/jquery-2.1.2.min.js'
If I remove the two .js scripts from layout, the SELECT works. If I will remove the two scripts from the form and leave them in layout, the SELECT won't work anymore with following error in browser:
"job:65 Uncaught TypeError: $(...).material_select is not a function"
The error remain even if I will put it to the application.js in this way:
$(document).ready(function() { $('select').material_select(); });
Any idea what is wrong? I went along many select and dropdown problems with materialize but couldn't figure it out.
Thank you.