web-dev-qa-db-ja.com

jQuery UI "$（"＃datepicker "）。datepickerは関数ではありません"

既存の.aspxページでjQueryのUIプラグインであるDatePickerを使用すると、次のエラーが表示されます。

$("#datepicker").datepicker is not a function

ただし、datePickerを作成して使用する同じコードをaspxページと同じディレクトリにあるHTMLファイルにコピーして貼り付けると、問題なく動作します。これにより、aspxページにdatePickerまたはjQueryのUI JSファイルが正しくロードされない可能性のあるJSファイルがあると想定します。

誰もが私の信念を確認したり、jQueryのUIプラグインを妨害している犯人を見つけるヒントを提供できますか？

asp.netjavascriptjquerydatepicker
112
burnt1ce

私は同様の問題に何時間も苦労しました。その後、jQuery関数を追加するプログラムによって1回、社内デバッガーによって1回、jQueryが2回含まれることが判明しました。

186
Eugene van der Merwe

$変数を使用している別のライブラリがある場合、これを行うことができます。

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

また、jqueryコアライブラリがjquery.uiの前に定義されるように、javascriptのインクルードが正しい順序であることを確認してください。その原因の問題がありました。

32
MacAnthony

このエラーは通常、jQuery UIセットからファイルが欠落している場合に表示されます。

すべてのファイル、jQuery UIファイル、CSSおよび画像があり、それらがサーバー上の正しくリンクされたファイル/ディレクトリの場所にあることを再確認します。

18
random

競合があると思われる場合は、コードでjQuery.noConflict()を使用できます。詳細は docs にあります。

参照マジック-JQUERYのショートカット

完全な「jQuery」を常に入力したくない場合は、いくつかの代替ショートカットがあります。

JQueryを別のショートカットvar $j = jQuery;に再割り当てします（異なるライブラリを使用したい場合、これが最善の方法かもしれません）次の手法を使用します。

(function($) { /* some code that uses $ */ })(jQuery)

注：この手法を使用する場合、このカプセル化された関数内で、Prototypeの$を期待するPrototypeメソッドを使用できないため、そのブロックでjQueryのみを使用することを選択しています。 DOM readyイベントへの引数を使用します。

jQuery(function($) { /*some code that uses $ */ });

注：繰り返しますが、そのブロック内ではPrototypeメソッドを使用できません

それはドキュメントの終わりからであり、あなたに役立つかもしれません

8
AutomatedTester

jQuery“ $（”＃datepicker“）。datepickerは関数ではありません”

最後のフォームのbodyセクションに以下の3つのファイルを配置することで問題を修正しました。

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
8
Krishna

最初に明らかにしてください：jquery-ui.jsファイルをよく参照していますか？

Firebugのネットワークタブを使用して、ロードされているかどうかを確認するか、Web DeveloperツールバーのInformation\View javascriptコードを試してください。

5
eKek0

Firebugを使用して1）Javascriptエラーがないことを確認し、2）ページに#datepicker要素が存在することを確認しましたか？

おそらく、datepicker呼び出しの前にエラーが発生し、datepicker呼び出しの実行が妨げられています。

3
1kevgriff

私はこの投稿がかなり古いことを知っていますが、参考のためにdatepickerのバージョンを更新することでこの問題を修正しました

数時間のデバッグを避けるためにも、それを試してみる価値があります。

https://cdnjs.com/libraries/bootstrap-datepicker

2
Yannickv

また、ファイルをダウンロードするディレクトリの権限も確認してください。何らかの理由でこれをダウンロードしたとき、デフォルトではアクセスが許可されていないフォルダーに保存されていました！それが問題であることを理解するのに永遠に時間がかかりましたが、ディレクトリとそのコンテンツの許可を変更する必要がありました-EVERYONE = READ ONLYに設定してください。今はうまくいきます。

1
Matthew Fries

最近この問題に遭遇しました-問題は、jQuery UIファイルをheadタグに含めていたが、使用していたTelerikライブラリにはbodyタグの下部にjQueryが含まれていたためです（したがって、明らかにjQueryを再初期化してUIをアンロードします）以前にロードされたプラグイン）。

解決策は、jQueryが実際に含まれている場所を見つけ、その後にjQuery UIスクリプトを含めることでした。

1
user15486

この問題が発生したばかりで、</body>タグで修正される前に、JS参照とコードをページの下部に移動しました。

1
Banjer

あなたが呼び出す前にいくつかのファイルはロードされません。

例：あなたのコード：

<%= javascript_include_tag "distpicker.min" %>
<%= javascript_include_tag "distpicker.data.min" %>

これに変更：

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>
0
David tsang

$（ "＃<％= txtDateElementId.ClientID％>"）。datepicker（）;を使用してみましたか？代わりに$（ "＃txtDateElementId"）。datepicker（）; JQueryを使用してIDで要素を選択する場合。

0
Emil Filip

_Layout.cshtmlのjqueryバンドルを削除すると、この問題を修正できます。

ヘッダ

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    ...

フッター

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

フッターを変更

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

同様の問題が発生しました。スクリプト参照を自己終了タグ（<script src=".." />）から空のノード（<script src=".."></script>）に変更すると、エラーがなくなり、jQuery UI関数を突然参照できました。

当時、これが最初から適切に閉じられなかったことに頭を悩ませていることに気づきませんでした。 （スレッドに出くわす他の誰かが同様の問題を抱えている可能性があるため、これを投稿しています。

0
Peter Bernier