Error dropdown materialize using .dropdown() - $ is not a function

Question

I am triying to install a dropdown in materialize using instructions but when ran the code console throw me an error

This is the code

//main.js
$(()=>{	
	alert("Hola de nuevo! Ahora con Materialize")
	console.log('Main cargando')
  $('.dropdown-button').dropdown();

})

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejs Test</title>
	<link rel="stylesheet" href="css/materialize.css">
	<link rel="stylesheet" href="css/materialize.min.css">
		

	<script src="js/materialize.min.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/main.js"></script>

</head>
<body>

	<ul class="dropdown-content" id="dropdown1">
		<li>TextoPrueba</li>
		<li>TextoPrueba</li>
		<li>TextoPrueba</li>
	</ul>	
	<div class="navbar-fixed">
		<nav>
			<div class="nav-wrapper">
				<a href="#" class="brand-logo">BrandLogo</a>
				<ul class="right hide-on-med-and-down">
					<li><a href="#">Texto1</a></li>
					<li><a href="#">Texto2</a></li>
					<li><a href="#">Texto3</a></li>
					<li><a href="#" class="dropdown-button" data-activates="dropdown1">TextoDropDown</a></li>
				</ul>
			</div>
		</nav>
	</div>
</body>
</html>

in the console of the code inspector throw me

Uncaught TypeError: $(...).dropdown is not a function

what can i do to show the dropdown correctly?

Try moving your <script src="js/jquery.js"></script> above the <script src="js/materialize.min.js"></script>. — Aamir Jamal
– Aamir Jamal, Commented Oct 23, 2019 at 16:12

Marlon · Accepted Answer · 2019-07-17 17:01:05Z

3

Had the same problem and found the answer here: https://github.com/krescruz/angular-materialize/issues/96#issuecomment-164877838

In my case it was the order of javascript files include. materialize.js must be declared after jquery.

answered Jul 17, 2019 at 17:01

Marlon

1,8773 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Faizan Fareed · Accepted Answer · 2019-07-02 11:08:10Z

Add drop-down and their constrainWidth to false.

Materializecss dropdown documentation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    
<!-- Dropdown Trigger -->
   <a class='dropdown-trigger ' href='#' data-target='dropdown1'  >Drop Me!</a> 

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content' >
    
    <li><a href="#!">You got something</a></li>
        
    <li><a href="#!">Extra stuff</a></li>
    
 
    <li><a href="#!">You don't have notfications</a></li>
 
  </ul>
  
  <script>
   
   $(document).ready(function () {
 
  $('.dropdown-trigger').dropdown({
    constrainWidth:false,
  }); 
  
  
  });
  
  
</script>

Bertram Skarupa · Accepted Answer · 2017-12-09 19:30:46Z

0

jQuery initialization for dropdowns is only necessary if you create them dynamically.

This should be enough:

<!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>

answered Dec 9, 2017 at 19:30

Bertram Skarupa

459 bronze badges

Collectives™ on Stack Overflow

Error dropdown materialize using .dropdown() - $ is not a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related