Topic: Problem with select input

Christian Raoulis free asked 5 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 priority answered 3 years 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 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


Mikołaj Smoleński staff answered 5 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 free 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 free 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 ;)


Mikołaj Smoleński staff answered 5 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 free 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?



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.8.5
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes