web-dev-qa-db-fra.com

TypeError: $ (...). SideNav n'est pas une fonction

J'essaie d'utiliser le thème Materialize pour créer une barre latérale dans JSF avec Spring. Et j'ai importé les js et css de Materialise, mais il en résulte une erreur TypeError: $(...).sideNav is not a function. Je ne sais pas pourquoi, et j'ai essayé dans un fichier HTML normal, et ça marche.

Quelle est la raison pour laquelle je reçois cette erreur et comment y remédier?

La structure de la 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>


Le fichier JSF menuTemplate.xhtml qui tente de créer une barre latérale.

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

Le message d'erreur:

 enter image description here

javascriptmaterialize
6
Capslock10

Il y a 2 problèmes dans votre code:

1: MaterializeCSS n'est pas compatible avec jQuery 3. Vous devez donc utiliser une version plus ancienne de JQuery. Essayez 2.x.x:

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

2: Dans vos commentaires, lorsque vous importez des scripts, il est clairement indiqué d'importer jQuery avant Materialize.js

<!--Import jQuery before materialize.js-->

et vous l'importez toujours après. Alors changez ces lignes, importez jQuery avant materialize.js

6
Raman Kumar Sharma

Pour que .sideNav () fonctionne, MaterializeCSS v1.0.0 n'est pas compatible avec jQuery v3 ou v2, vous devez donc utiliser une version plus ancienne de MaterializeCSS. Essayez 0.x.x : cela a fonctionné pour moi!

par exemple:

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

4
anoNewb

Materialise est compatible avec jQuery3. Vous devez juste charger jQuery avant de charger materialize.min.js.

3
QD Voice

Mise à jour: octobre 2017: Materialize v0.100.2 fonctionne avec jQuery v3.2.1, à condition de les placer dans le bon ordre:

L'extrait de code ci-dessous provient du site MaterializeCSS:

<!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>
1
Hitesh Sahu

J'ai eu le même problème. C’est la solution que j’ai trouvée.

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

Le problème est que vous accédez à l'élément jQuery avant son rendu. Attends une seconde.

0
Matt