TypeError: $(...).sideNav is not a function
Solution 1
There are 2 problems in your code:
1: MaterializeCSS is not compatible with jQuery 3, So you have to use some older version of JQuery. Try 2.x.x:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
2: In your comments, where you are importing scripts it is clearly mentioned to import jQuery before Materialize.js
<!--Import jQuery before materialize.js-->
and you are still importing it after. So switch those lines, import jQuery before materialize.js
Solution 2
Materialize is compatible with jQuery3. You just have to load jQuery first before you load materialize.min.js.
Solution 3
For .sideNav() to work, MaterializeCSS v1.0.0 is not compatible with jQuery v3 or v2, So you have to use older version of MaterializeCSS. Try 0.x.x: it worked for me!
eg:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
Solution 4
.sideNav() has been renamed .sidenav() in v1.0.0 see https://materializecss.com/sidenav.html
Solution 5
The order of loading is important, as stated above. JQuery 3.3.1 works with Materialize 1.0.0:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Related videos on Youtube
Capslock10
Updated on August 21, 2020Comments
-
Capslock10 over 3 years
I am trying to use Materialize theme to make a side bar in JSF with
Spring
. And I imported the Materialize'sjs
andcss
, but it comes out an errorTypeError: $(...).sideNav is not a function
. I don't know why, and I tried in a normal HTML file, and it works.What is the reason that I get this error and how to fix it?
The structure of the page:
<h:head> <title><h:outputText value="#{msg.title}" /></title> <!-- Import Materialize css --> <link rel="stylesheet" href="./themes/materialize/css/materialize.min.css"/> <!-- Compiled and minified JavaScript --> <script src="./themes/materialize/js/materialize.min.js"></script> <script src="./themes/materialize/js/materialize.js"></script> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script> <script> (function($){ $(function(){ $('.button-collapse').sideNav('show'); }); // end of document ready })(jQuery); // end of jQuery name space </script> </h:head> <h:body onload="init();"> <!--<table id="Table_01" class="Table_01">--> <table id="WholeFunctionPageLayoutTable" cellspacing="0px" cellpadding="0px" width="100%" border="0px"> <tr id="WholeFunctionPageWidthSpacer" > <td> <!--<table class="Table_SASC_03">--> <table cellspacing="0px" cellpadding="0px" style="margin-left:0px; padding-left:0px;" border="0px"> <tr valign="top"> <td> <ui:include src="MenuTemplate.xhtml" /> </td> </tr> </table> </td> <!-- End Page Left Menu Navigation Section --> </tr> </table> </h:body> </html>
The JSF file
menuTemplate.xhtml
that trying to make a side bar.<ui:composition> <ul id="slide-out" class="side-nav"> <li><div class="userView"> <div class="background"> <img src="../img/EN_logo.jpg"/> </div> <a href="#!user"><img class="circle" src="../img/EN_logo.jpg"/></a> <a href="#!name"><span class="white-text name">John Doe</span></a> <a href="#!email"><span class="white-text email">[email protected]</span></a> </div></li> <li><a href="#!"><i class="material-icons">cloud</i>First Link With I con</a></li> <li><a href="#!">Second Link</a></li> <li><div class="divider"></div></li> <li><a class="subheader">Subheader</a></li> <li><a class="waves-effect" href="#!">Third Link With Waves</a></li> </ul> <a href="#" data-activates="slide-out" class="button-collapse">menu</a> </ui:composition>
The error message:
-
Koushik Shom Choudhury over 4 yearsdon't know if it were true at the time of this comment. But materialize 1.0.0 is now perfectly running with jQuery 3.4.1, the solution was to load jQuery first.
-
Transamunos over 3 yearsGood idea, using
setTimeout
, but sometimes it fail. -
Mashhood over 2 yearsYou can call this upon .ready event of either document itself or the parent/container element of this element
-
Srinath Kamath over 2 yearsYes, but you're only partly correct. You need to check with the jquery version you're using along with the materializecss.min.js version.