web-dev-qa-db-ja.com

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

Materializeテーマを使用して、JSFでSpringのサイドバーを作成しようとしています。マテリアライズの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>

エラーメッセージ：

enter image description here

javascriptmaterialize
9
Capslock10

コードには2つの問題があります。

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

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

2：スクリプトをインポートするコメントでは、Materialize.jsの前にjQueryをインポートすることが明確に述べられています

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

そして、あなたはまだそれをインポートしています。したがって、これらの行を切り替えて、materialize.jsの前にjQueryをインポート

8
Raman Kumar Sharma

MaterializeはjQuery3と互換性があります。 materialize.min.jsをロードする前に、まずjQueryをロードする必要があります。

5
QD Voice

.sideNav（）が機能するためには、jQuery v3またはv2でMaterializeCSS v1.0.0は互換性がありませんなので、古いバージョンのMaterializeCSSを使用する必要があります。 .x.xを試してください：うまくいきました！

例えば：

<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

上記のように、ロードの順序は重要です。 jQuery 3.3.1は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>
1
Doris Gammenthaler

更新：2017年10月：Materialize v0.100.2はjQueryで動作しますv3.2.1、正しい順序で配置する必要がある場合：

以下のコードスニペットは、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

私は同じ問題にぶつかった。それはisなので、jQueryはMaterialize.min.jsファイルの前にロードする必要があります。注文を入れ替えると、すべて正常に動作しました。順序が正しい限り、jQuery 3でこれを機能させることは問題ありません。

<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>
1
Mark Allen

私も同じ問題を抱えていました。これが私が思いついた解決策です。

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

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

0
Matt