webentwicklung-frage-antwort-db.com.de

jQuery-Benutzeroberfläche "$ (" # datepicker "). datepicker ist keine Funktion"

Wenn ich DatePicker, das Plug-In für die Benutzeroberfläche von jQuery, in einer vorhandenen ASPX-Seite verwende, erhalte ich die folgenden Fehler:

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

Wenn ich jedoch den gleichen Code, der den datePicker erstellt und verwendet, in eine HTML-Datei, die sich im selben Verzeichnis wie die aspx-Seite befindet, kopiert und eingefügt habe, funktioniert sie einwandfrei. Ich gehe daher davon aus, dass es auf der aspx-Seite einige JS-Dateien gibt, die das korrekte Laden der datePicker- oder möglicherweise der JQuery-UI-Dateien von jQuery verhindern.

Kann jemand meine Überzeugung bestätigen oder Tipps geben, um den Täter zu finden, der die Plugins der jQuery-Benutzeroberfläche stört? 

103
burnt1ce

Ich hatte stundenlang mit einem ähnlichen Problem zu kämpfen. Es stellte sich dann heraus, dass jQuery zweimal enthalten war, einmal von dem Programm, dem ich eine jQuery-Funktion hinzufügte, und einmal von unserem internen Debugger.

183

Wenn eine andere Bibliothek die $ -Variable verwendet, können Sie Folgendes tun:

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

Stellen Sie außerdem sicher, dass Ihre Javascript-Inhalte in der richtigen Reihenfolge sind, sodass die Jquery-Core-Bibliothek vor jquery.ui definiert ist. Ich hatte diese Ursachenprobleme.

31
MacAnthony

Dieser Fehler wird normalerweise angezeigt, wenn eine Datei aus dem jQuery-UI-Set fehlt. 

Vergewissern Sie sich, dass alle Dateien, die jQuery-UI-Dateien sowie das CSS und die Bilder vorhanden sind und dass sie sich im korrekt verknüpften Datei-/Verzeichnispfad auf Ihrem Server befinden.

18
random

Wenn Sie glauben, dass ein Konflikt vorliegt, können Sie jQuery.noConflict() in Ihrem Code verwenden. Details finden Sie in den docs .

REFERENCING MAGIC - SHORTCUTS FÜR JQUERY

Wenn Sie nicht gerne die vollständige Eingabe machen möchten "jQuery" die ganze Zeit, gibt es einige alternative Tastenkombinationen:

Ordnen Sie jQuery erneut einer anderen Verknüpfung zu var $j = jQuery; (Dies kann die beste Vorgehensweise sein, wenn Sie verschiedene Bibliotheken verwenden möchten.) Verwenden Sie die folgenden Technik, mit der Sie $ .__ verwenden können. innerhalb eines Codeblocks ohne $ dauerhaft überschreiben:

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

Hinweis: Wenn Sie diese .__ verwenden. können Sie .__ nicht verwenden. Prototyp-Methoden in diesem gekapselten Funktion, die erwartet, dass $ .__ ist. Prototypes $, also machen Sie eine Wahl, nur jQuery in diesem .__ zu verwenden. Block. Verwenden Sie das Argument für das DOM bereite Veranstaltung: 

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

Hinweis: Innerhalb dieses Blocks können Sie .__ nicht verwenden. Prototyp-Methoden

Das ist vom Ende der Dokumente und kann für Sie nützlich sein

8
AutomatedTester

jQuery "$ (" # datepicker "). datepicker ist keine Funktion"

Ich habe das Problem behoben, indem ich am Ende die drei untenstehenden Dateien in den Hauptteil des Formulars eingefügt habe. 

  <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" />
6
Krishna

Gehen Sie für das offensichtliche Erste: Verweisen Sie gut auf die Datei jquery-ui.js? 

Versuchen Sie es mit Hilfe der Netzwerkregisterkarte von Firebug, ob es geladen ist, oder mit dem JavaScript-Code Information\View der Web Developer Toolbar.

5
eKek0

Haben Sie versucht, Firebug zu verwenden, um 1) festzustellen, dass keine Javascript-Fehler vorliegen, und 2) dass das Element #datepicker auf der Seite vorhanden ist?

Höchstwahrscheinlich liegt vor dem Aufruf von datepicker ein Fehler vor, der die Ausführung des Aufrufs von datepicker verhindert.

3
1kevgriff

Ich weiß, dass dieser Beitrag ziemlich alt ist, aber als Referenz habe ich dieses Problem durch Aktualisieren der Version von Datepickerbehoben

Es lohnt sich auch, dies zu versuchen, um stundenlanges Debuggen zu vermeiden.

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

2
Yannickv

Überprüfen Sie auch die Berechtigungen für das Verzeichnis, in das Sie die Dateien herunterladen. Aus irgendeinem Grund wurde ich beim Herunterladen standardmäßig in einem Ordner ohne Zugriff gespeichert! Es dauerte ewig, um herauszufinden, dass dies das Problem war, aber ich musste nur die Berechtigung für das Verzeichnis und den Inhalt ändern. Funktioniert jetzt gut.

1
Matthew Fries

Ich stieß kürzlich auf dieses Problem - das Problem war, dass ich die jQuery-UI-Dateien in das head-Tag eingefügt hatte. Die Telerik-Bibliothek, die ich verwendete, hat jQuery am unteren Rand des body-Tags verwendet zuvor geladene Plugins).

Die Lösung bestand darin, herauszufinden, wo jQuery tatsächlich enthalten war, und danach die jQuery-UI-Skripts.

1
user15486

Ich hatte gerade dieses Problem und das Verschieben der JS-Referenzen und des Codes nach unten auf der Seite, bevor der </body>-Tag es für mich reparierte.

1
Banjer

Einige Dateien werden vor dem Aufruf nicht geladen.

Zum Beispiel: Ihr Code:

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

Ändern Sie dies:

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

Haben Sie es mit $ Versucht ("# <% = txtDateElementId.ClientID%>"). Datepicker (); statt $ ("# txtDateElementId"). datepicker (); bei der Auswahl eines Elements nach ID mit JQuery.

0
Emil Filip

Ich konnte dieses Problem beheben, indem das Jquery-Bundle in der _Layout.cshtml entfernt wurde

Header

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

Fußzeile

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

Ändern Sie die Fußzeile in

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

Ich bin gerade auf ein ähnliches Problem gestoßen. Als ich meine Skriptreferenz von selbstschließenden Tags (dh <script src=".." />) zu leeren Knoten (dh <script src=".."></script>) änderte, gingen meine Fehler weg und ich konnte plötzlich auf die Funktionen der jQuery-Benutzeroberfläche verweisen.

Zu der Zeit wusste ich nicht, dass dies nur ein Verstand von mir war, der es nicht richtig schloss. (Ich poste dies einfach mit der Möglichkeit, dass jeder, der auf den Thread trifft, ein ähnliches Problem hat.)

0
Peter Bernier