CODEWITHSUNDEEP
javascriptmaterialize
Capslock10
Capslock10

Reputation: 806

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

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

Upvotes: 12

Views: 22745

Answers (9)

Milad Amirvafa
Milad Amirvafa

Reputation: 51

In your javascript initialization use sidenav() instead of sideNav()

Change this:

(function($){
   $(function(){
    $('.button-collapse').sideNav('show');
 });
})(jQuery);

To this:

(function($){
 $(function(){
  $('.sidenav').sidenav();
 });
})(jQuery);

Upvotes: 0

Pulse-Eight
Pulse-Eight

Reputation: 101

.sideNav() has been renamed .sidenav() in v1.0.0 see https://materializecss.com/sidenav.html

Upvotes: 3

Doris Gammenthaler
Doris Gammenthaler

Reputation: 624

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>

Upvotes: 2

Mark Allen
Mark Allen

Reputation: 129

I hit the same problem. It is because jQuery must be loaded before the Materialize.min.js file. Once I switched the order, everything worked fine. No problem with getting this working with jQuery 3 as long as the order is correct.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Upvotes: 1

Harshal
Harshal

Reputation: 8310

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>

Upvotes: 5

QD Voice
QD Voice

Reputation: 61

Materialize is compatible with jQuery3. You just have to load jQuery first before you load materialize.min.js.

Upvotes: 6

Hitesh Sahu
Hitesh Sahu

Reputation: 45062

Update: Oct-2017: Materialize v0.100.2 works with jQuery v3.2.1, provided you need to put them in the right order:

Below code snippet is taken from MaterializeCSS site:

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Upvotes: 1

Matt
Matt

Reputation: 35201

I had the same problem. This is the solution I came up with.

setTimeout(function (){
  $('.button-collapse').sideNav('show');
},1000)

The problem is that you are accessing the jQuery element before it is rendered. Wait a second.

Upvotes: 1

Raman Kumar Sharma
Raman Kumar Sharma

Reputation: 413

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

Upvotes: 8

Related Questions