web-dev-qa-db-ja.com

不明なTypeError：$（...）。datepickerは関数ではありません（無名関数）

スタックオーバーフローに関する回答はほとんど見つかりませんでしたが、それでも問題を解決できません。 Djangoで実行していますが、このエラーに関係があるとは思いません。

日付ピッカーJavaスクリプトを機能させようとしましたが、エラーが発生しています

1:27キャッチされないTypeError：$（...）。datepickerは関数（匿名関数）@ 1：27fire @ jquery-1.9.1.js：1037self.fireWith @ jquery-1.9.1.js：1148jQuery.extend .ready @ jquery-1.9.1.js：433completed @ jquery-1.9.1.js：103 jquery-2.1.0.min.js：4 XHRの読み込み完了：POST " https ：// localhost：26143/skypectoc/v1/pnr/parse ".l.cors.a.crossDomain.send @ jquery-2.1.0.min.js：4o.extend.ajax @ jquery-2.1.0 .min.js：4PNR.findNumbers @ pnr.js：43parseContent @ contentscript.js：385processMutatedElements @ contentscript.js：322

これが私のすべてのスクリプトです：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script type="text/javascript">
              $(document).ready(function() {
                  $("#extra-content").hide();
                  $("#toggle-content").click(function(){
                      $("#extra-content").toggle();
                  });
              });
 </script>

フィードバックは大歓迎です

javascriptjquerydjangodatepicker
18
Ilya Bibik

何が悪かったのか？

初めてjQueryを含めるとき：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

2番目のスクリプトはそれ自体をjQueryにプラグインし、$(...).datepickerを「追加」します。

ただし、jQueryをもう一度含めることになります。

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

プラグインを元に戻すため、$(...).datepickerは未定義になります。

その前に最初の$(document).readyブロックが表示されますが、匿名コールバック関数の本体はすべてのスクリプトがロードされるまで実行されず、それまでに$(...)（正確にはwindow.$）が最も参照しています最近ロードされたjQuery。

$('.dateinput').datepickerコールバックではなく、すぐに$(document).readyを呼び出した場合、これに遭遇することはありませんが、ターゲット要素（クラスdateinput）が既に存在することを確認する必要があります。スクリプトの前のドキュメント。通常、readyコールバックを使用することをお勧めします。

解決

Jquery-uiのdatepickerを使用する場合、おそらくjquery-uiスクリプトafterブートストラップを含めるのが最も理にかなっています。 jquery-ui 1.11.4はjquery 1.6+と互換性があるため、正常に動作します。

あるいは（特にjquery-uiを他のことに使用していない場合）、 bootstrap-datepicker を試すことができます。

57
szym

3つのファイルと2つのcssリンクを追加するだけです。どちらのcdnも同様にできます。 jsファイルとcssファイルのリンクは次のとおりです。

  1. jQuery.dataTables.min.js
  2. dataTables.bootstrap.min.js
  3. dataTables.bootstrap.min.css
  4. bootstrap-datepicker.css
  5. bootstrap-datepicker.js

プロジェクトでbootstrapを使用している場合に有効です。

これがお役に立てば幸いです。よろしく、Vivek Singla

1
user8994237

ASP.NET MVCを使用している場合

開くレイアウトファイル"_ Layout.cshtml"またはカスタムファイル

以下に示すように、コードの一部で：

@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/jquery")

削除行 "@ Scripts.Render（"〜/ bundles/jquery "）"

（表示されるコードの部分で）以下のようにlatest行として過去：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")

これは私を助け、希望もあなたを助けます。

0
Mauro Candido

エラーは、日付ピッカーのオーバーライドと再初期化を行うスクリプトリンクを2つの場所に含めるためです。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

したがって、どちらかを除外しますsrc = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

またはsrc = "http://code.jquery.com/ui/1.11.0/jquery-ui.js"

それが動作します..

0
anvesh

エラーの原因は、Jqueryライブラリへの複数の参照を含めることですJqueryライブラリへの参照を1つだけ含めると、問題が解決します

0
Joktan Okpanachi