TypeError：$（...）。sideNavは関数ではありません

SpringでJSFのサイドバーを作成するためにMaterializeテーマを使用しようとしています。そしてMaterializeのjsとcssをインポートしましたが、エラーTypeError: $(...).sideNav is not a functionが出てきました。なぜか分からないし、普通のHTMLファイルで試してみるとうまくいく。

このエラーが発生する理由とその修正方法を教えてください。

ページの構造：

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

JSFファイルmenuTemplate.xhtmlサイドバーをしようとしていること。

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

エラーメッセージ：

出典

2017-05-16 Capslock10

あなたのコード内の2つの問題があります

1： MaterializeCSSはjQueryの3と互換性がありません、あなたは、いくつかを使用する必要がありますが、古いバージョンのJQuery 2.xxのを試してみてください：

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

2：あなたのコメントで、あなたはそれを明確にMaterialize.js

前

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

をjQueryのをインポートするには言及されているスクリプトをインポートしている、あなたはまだ後にそれをインポートしています。だから、これらの行を切り替えるjQueryの前にmaterialize.jsをインポート

出典

2017-05-16 08:50:13

私は同じ問題がありました。これは私が思いついた解決策です。

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

問題は、それがレンダリングされる前に、あなたはjQueryの要素にアクセスしているということです。一瞬待って。

出典

2017-07-26 20:51:31 Matt

更新：10月 - 2017：コードスニペットの下

がMaterializeCSSサイトから取得されます：

<!DOCTYPE html> <html> <head>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>  <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body>  <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>
jQueryのv3.2.1と Materialize v0.100.2作品は、あなたが正しい順序でそれらを配置する必要があります提供します

出典

2017-10-16 12:39:12

TypeError：$（...）。sideNavは関数ではありません

答えて

関連する問題