Topic: Problem with select input
Hey Guys,i've created a material select like in the docs but the menu don't open. I only get this error message:
Uncaught TypeError: Cannot read property 'setAttribute' of null
at Object.onLoad (popper.min.js:4)
at popper.min.js:4
at Array.forEach (<anonymous>)
at new t (popper.min.js:4)
at c.t.toggle (bootstrap.min.js:6)
at HTMLInputElement.<anonymous> (bootstrap.min.js:6)
at HTMLInputElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLInputElement.y.handle (jquery-3.3.1.min.js:2)
onLoad @ popper.min.js:4
(anonymous) @ popper.min.js:4
t @ popper.min.js:4
t.toggle @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
dispatch @ jquery-3.3.1.min.js:2
y.handle @ jquery-3.3.1.min.js:2
How can i fix this?
Edit:
<head>
...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mdb.min.css" rel="stylesheet">
</head>
<body>
...
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="js/modules/material-select.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.mdb-select').materialSelect();
});
</script>
</body>
Hi, i have the same problem. i use laravel framework. already did npm update (which updated to 3.9) and composer update but with no luck. even loading the .min.js directly still get this error any ideas?
Sami
Mikołaj Smoleński staff commented 3 years ago
There was a problem with unnecessary script <script type="text/javascript" src="js/modules/material-select.js"></script> loaded inside body section. Have you checked the right configuration?
Keep coding, Mikołaj from MDB
Hi there,
As I can see from your error logs the problem is not connected with our mdb.js script, but with other scripts. Please, try to reproduce the issue in our snippets editor or check all imported files in your project.
https://mdbootstrap.com/snippets/
Best regards
Christian Raoulis commented 5 years ago
The snipplet is works as it should.
I've imported the bootstrap.min.css and the mdb.min.css in my head tag and on the end of my body tag the jquery-3.4.1.min.js, popper.min.js, bootstrap.min.js, mdb.min.js and material-select.js
Did I forgot something?
Here's the right scripts order. Please compare it with your configuration:
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
Before body closing tag:
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
Best regards
Christian Raoulis commented 5 years ago
I ordered it like that, but the problem still exists.
Mikołaj Smoleński staff commented 5 years ago
Are You able to import any other component? Please try to use some other components and we'll see if the problem is connected with the files imported to your project.
Christian Raoulis commented 5 years ago
I've reinstalled all components. Now it works. :)
Thanks :D
Mikołaj Smoleński staff commented 5 years ago
Good to hear that. Good luck with new projects ;)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.5
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes