Problem with select input


Topic: Problem with select input

Christian Raoulis pro premium priority asked 2 years ago

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>

sody pro premium priority answered 2 months ago

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 2 months 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


Mikołaj Smoleński staff answered 2 years ago

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 pro premium priority commented 2 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?


Mikołaj Smoleński staff answered 2 years ago

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 pro premium priority commented 2 years ago

I ordered it like that, but the problem still exists.


Mikołaj Smoleński staff commented 2 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 pro premium priority commented 2 years ago

I've reinstalled all components. Now it works. :)

Thanks :D


Mikołaj Smoleński staff commented 2 years ago

Good to hear that. Good luck with new projects ;)


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes