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

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?

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.

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.

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.

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

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

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.

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.

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

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.

Ü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.

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.

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.)

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" %>

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)

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

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

Nach der Arbeit):