Problem with select input

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>

Add comment

sody priority answered 3 years ago

1 0 Best answer

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

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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 ;)

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

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?

Add comment

Write

Create snippet

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

Christian Raoulis

10Support score
2Questions 0Answers 0Snippets