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

125

Wenn ich DatePicker, das UI-Plugin von jQuery, auf einer vorhandenen ASPX-Seite verwende, erhalte ich folgende Fehler:

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

Wenn ich jedoch denselben Code kopiere und einfüge, der den datePicker erstellt und verwendet, in eine HTML-Datei, die sich ebenfalls im selben Verzeichnis wie die aspx-Seite befindet, funktioniert dies einwandfrei. Dies lässt mich annehmen, dass die aspx-Seite einige JS-Dateien enthält, die verhindern, dass die JS-Dateien von datePicker oder jQuery ordnungsgemäß geladen werden.

Kann jemand meine Überzeugungen bestätigen oder Tipps geben, wie man den Schuldigen findet, der die UI-Plugins von jQuery stört?

verbrannt1ce
quelle
Können Sie den entsprechenden jQuery-Code bitte posten
Russ Cam
Wie fügen Sie das Datepicker-Plugin in die Seite ein - befindet es sich in einem ScriptManagerProxy oder schreiben Sie es direkt in die Seite? Sind Sie sicher, dass es geladen wird? Wenn ja, welche anderen Plugins schließen Sie ein? Sind Sie sicher, dass Sie ui.core.js aufgenommen haben?
James Kolpack
12
Ich habe das Problem gefunden. Ich wünschte, ich hätte diese Lösung gestern im Gegensatz zu einer Stunde nach dem Posten dieser Frage gefunden. Der von mir geschriebene JS-Code verweist auf die Javascript-Datei jQuery und jQuery UI und fungierte als Modul. Das übergeordnete Element verweist auch auf jQuery am unteren Rand des Body-Tags (also 2 Verweise auf jQuery). Da jQuery nach der jQuery-Benutzeroberfläche neu initialisiert wird, wird die jQuery-Benutzeroberfläche als Plugin gelöscht, weshalb mein Code das DatePicker-Plugin nicht finden konnte.
Burnt1ce
Da ich Webpack verwende, musste ich stattdessen jquery-ui-bundle verwenden. stackoverflow.com/a/39230057/470749
Ryan

Antworten:

210

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.

Eugene van der Merwe
quelle
4
Das war auch mein Problem. Ich hatte einen Verweis auf meine eigene jQuery-Bibliothek zusammen mit jQuery Tools CDN, das unwissentlich jQuery enthielt.
DavGarcia
Dies war auch mein Problem. Ich benutze Superfish und es wurde auch JQuery geladen. Ich habe es bis jetzt nicht bemerkt.
rrtx2000
45
Was ist die Lösung?
Henrique Ordine
8
@HenriqueOrdine überprüfen Sie noch einmal, ob jQuery nicht zweimal auf der Seite enthalten ist.
Eugene van der Merwe
Das war auch mein Problem. Ich habe gemeinsame Assets in der Rails-Asset-Pipeline verwendet und sowohl jquery in meiner Metadatei der obersten Ebene (application.js) deklariert als auch eine jquery min-Datei in meinem JS-Ordner. Doppelte Deklaration. Ich habe gerade die jquery-Deklaration entfernt.
Mario
38

Wenn es eine andere Bibliothek gibt, die die Variable $ verwendet, können Sie dies tun:

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

Stellen Sie außerdem sicher, dass Ihre Javascript-Includes in der richtigen Reihenfolge vorliegen, damit die jquery-Kernbibliothek vor der jquery.ui definiert wird. Ich hatte diese Ursache Probleme.

MacAnthony
quelle
Stellen Sie außerdem sicher, dass Ihre Javascript-Includes in der richtigen Reihenfolge vorliegen, damit die jquery-Kernbibliothek vor der jquery.ui definiert wird. Ich hatte diese Ursache Probleme << das ist die richtige Antwort für mich.
Macaesar
22

Dieser Fehler tritt normalerweise auf, wenn Sie eine Datei in der jQuery-Benutzeroberfläche vermissen.

Stellen Sie sicher, dass Sie alle Dateien, die jQuery-UI-Dateien sowie das CSS und die Bilder haben und dass sie sich am korrekt verknüpften Speicherort der Datei / des Verzeichnisses auf Ihrem Server befinden.

zufällig
quelle
Diese Antwort kommt der von mir veröffentlichten Lösung am nächsten.
Burnt1ce
Hinweis für sich selbst: Stellen Sie sicher, dass Sie beim Wechsel von lokalen Dateien zu Googles CDN-Dateien tatsächlich die richtige URL haben. Es ist ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, nicht ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js, verdammt noch mal.
Neminem
17

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

Ich habe das Problem behoben, indem ich die folgenden drei Dateien am Ende 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" />
Krishna
quelle
1
Du bist ein Lebensretter, irgendwie war es DIESE, die mich nach 2 Tagen ununterbrochenen Kampfes gerettet hat.
Tejas Jaggi
8

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

REFERENZMAGIE - KURZSCHNITTE FÜR JQUERY

Wenn Sie nicht immer die vollständige "jQuery" eingeben möchten, gibt es einige alternative Verknüpfungen:

Weisen Sie jQuery einer anderen Verknüpfung zu var $j = jQuery;(Dies ist möglicherweise der beste Ansatz, wenn Sie verschiedene Bibliotheken verwenden möchten). Verwenden Sie die folgende Technik, mit der Sie $ innerhalb eines Codeblocks verwenden können, ohne $ dauerhaft zu überschreiben:

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

Hinweis: Wenn Sie diese Technik verwenden, können Sie innerhalb dieser gekapselten Funktion keine Prototype-Methoden verwenden, bei denen erwartet wird, dass $ Prototype $ ist. Sie können also nur jQuery in diesem Block verwenden. Verwenden Sie das Argument für das DOM-fähige Ereignis:

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

Hinweis: Auch in diesem Block können Sie keine Prototype-Methoden verwenden

Das ist vom Ende der Dokumente und könnte für Sie nützlich sein

AutomatedTester
quelle
7

Gehen Sie zunächst auf das Offensichtliche ein: Verweisen Sie gut auf die Datei jquery-ui.js?

Verwenden Sie die Registerkarte "Netzwerk" von firebug, um festzustellen, ob es geladen ist, oder den Javascript-Code "Information \ View" der Web Developer Toolbar.

eKek0
quelle
3

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

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

1kevgriff
quelle
2

Ich weiß, dass dieser Beitrag ziemlich alt ist, aber als Referenz habe ich dieses Problem behoben, indem ich die Version von datepicker aktualisiert habe

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

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

Yannickv
quelle
2
Dies gilt nicht für Jquery UI Datepicker. Bootstrap Datepicker ist ein ganz anderes Tier.
RedSands
1

Ich hatte gerade dieses Problem und habe die JS-Referenzen und den Code an den unteren Rand der Seite verschoben, bevor das </body>Tag es für mich behoben hat.

Banjer
quelle
1

Überprüfen Sie auch die Berechtigungen für das Verzeichnis, in das Sie die Dateien herunterladen. Aus irgendeinem Grund wurde es beim Herunterladen standardmäßig in einem Ordner ohne Zugriff gespeichert! Es hat ewig gedauert, um herauszufinden, dass dies das Problem war, aber ich musste nur die Berechtigung für das Verzeichnis und dessen Inhalt ändern - es so einstellen, dass JEDER = NUR LESEN. Funktioniert jetzt super.

Matthew Fries
quelle
1

Ich bin kürzlich auf dieses Problem gestoßen - das Problem war, dass ich die jQuery-UI-Dateien in das Head-Tag aufgenommen hatte, aber die von mir verwendete Telerik-Bibliothek enthielt jQuery am unteren Rand des Body-Tags (wodurch jQuery anscheinend neu initialisiert und die UI entladen wurde zuvor geladene Plugins).

Die Lösung bestand darin, herauszufinden, wo jQuery tatsächlich enthalten war, und anschließend die Skripte für die jQuery-Benutzeroberfläche einzuschließen.


quelle
0

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

Zu der Zeit war mir nicht klar, dass dies nur ein Hirnfurz von mir war, der es zunächst nicht richtig schloss. (Ich poste dies nur mit der Möglichkeit, dass jemand anderes, der auf den Thread stößt, ein ähnliches Problem hat.)

Peter Bernier
quelle
0

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" %>
David Tsang
quelle
0

Ich konnte dieses Problem beheben, indem ich das jquery-Bundle in der Datei _Layout.cshtml entfernte

Header

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

Fusszeile

    @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)
jaimenino
quelle
0

Haben Sie versucht, $ ("# <% = txtDateElementId.ClientID%>") zu verwenden. Datepicker (); anstelle von $ ("# txtDateElementId"). datepicker (); bei der Auswahl eines Elements anhand der ID mit JQuery.

Emil Filip
quelle
-1

In meinem Fall wurde es gelöst, indem die Importreihenfolge der folgenden Skripte geändert wurde: Vorher (funktioniert nicht):

Nach der Arbeit):

Matías W.
quelle