TypeError: $(...).sideNav is not a function

20,905

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>
Share:
20,905

Related videos on Youtube

Capslock10
Author by

Capslock10

Updated on August 21, 2020

Comments

  • Capslock10
    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's js and css, but it comes out an error TypeError: $(...).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:

    enter image description here

  • Koushik Shom Choudhury
    Koushik Shom Choudhury over 4 years
    don'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
    Transamunos over 3 years
    Good idea, using setTimeout, but sometimes it fail.
  • Mashhood
    Mashhood over 2 years
    You can call this upon .ready event of either document itself or the parent/container element of this element
  • Srinath Kamath
    Srinath Kamath over 2 years
    Yes, but you're only partly correct. You need to check with the jquery version you're using along with the materializecss.min.js version.

Related