wake-up-neo.com

JS/jQuery TypeError: jQuery (...). Datepicker ist keine Funktion

Ich habe mir zwei Tage lang den Kopf gekratzt, ziemlich sicher, dass mir nur etwas einfaches fehlt, aber ich kann nicht herausfinden, warum es nicht funktioniert.

Ich versuche, das folgende Skript auf meiner WordPress-Site zu verwenden, um bestimmte Datumsangaben in einem Datepicker-Feld in einem ContactForm7-Formular zu deaktivieren.

Ich kann das Skript mit einem einfachen Eingabefeld mit derselben ID in jsfiddle laden und es funktioniert einwandfrei ... aber wenn ich es meiner Site hinzufüge, werden die Datumsangaben nicht deaktiviert und es gibt einen Fehler in der JS-Fehlerkonsole, der besagt " jQuery (...). datepicker ist keine Funktion "

Ich habe es meiner header.php-Datei hinzugefügt, direkt unterhalb des Aufrufs wp_head() und oberhalb des </head>-Tags. Ich habe meinem Datepicker-Feld die ID von dpick zugewiesen, wie es das Skript verwendet.

Ich habe gelesen, dass dieser Fehler in der Regel bei der Verwendung des $-Symbols verursacht wird, da er mit anderen jQuery-Skripts in WordPress in Konflikt stehen kann. Daher wurde vorgeschlagen, stattdessen $ durch jQuery zu ersetzen (was ich im folgenden Skript getan habe) ... aber ich Ich bekomme immer noch den Fehler

var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];

    function unavailable(date) {
            dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
            if (jQuery.inArray(dmy, unavailableDates) == -1) {
                return [true, ""];
            } else {
                return [false, "", "Unavailable"];
        }
    }

        jQuery(function() {
            jQuery( '#dpick' ).datepicker({
                dateFormat: 'dd MM yy',
                beforeShowDay: unavailable
        });

    });

Ich kann mich nicht genug für jede Hilfe bedanken, die Sie anbieten können ... das scheint so einfach zu sein, aber ich scheine meinen Kopf nicht zu umwickeln!

13
Iconoclast

Es gibt mehrere Gründe für diesen Fehler:

  1. Das jquery.ui wird vor jquery verwendet.
  2. Das $ wird von einer anderen Bibliothek verwendet.
  3. Die lokal verwiesene Jquery-Bibliothek (WordPress) hat eine andere Version als jquery.ui.
  4. Wenn auf die richtige Bibliothek und Version verwiesen wird, muss der Browser-Cache gelöscht werden.
21
napoleonss

Ich hatte das gleiche Problem. In meinem Fall hatte ich zwei jQuery-Skriptreferenzen auf meiner Hauptseite (_Layout.cshtml in ASP.NET MVC). Ich habe oben einen Verweis auf jQuery hinzugefügt, aber unten auf der Seite war 1, die ich nicht bemerkt habe.

enter image description here

Wie Sie sehen, saß die jQuery-Benutzeroberfläche mitten im Konflikt! : D Das hat mich etwas geklärt.

6

Das hat für mich funktioniert, für widersprüchliche Jquery-Codes -

  <script>  
  $.noConflict();  //Not to conflict with other scripts
jQuery(document).ready(function($) {
$( "#datepicker" ).datepicker({
  dateFormat:"yyyy-mm-dd",
  changeMonth: true,
  changeYear: true,
  maxDate: "+0D"
});

});
</script>
3
cookiesncream

prüfen Sie, ob alle Dateien geladen sind. Sie sollten den Status 200 OK haben.

3
Pratswinz

Ich habe nicht viel Erfahrung mit WordPress, daher bin ich vielleicht nicht in der Lage zu helfen. Ich habe jedoch Pickadate verwendet.

In der Vergangenheit habe ich diesen Fehler schon einmal bekommen

Nicht erfasstes TypeError: Object [object Object] hat keine Methode 'datepicker' 

Dies geschieht normalerweise, weil ich die js-Dateien nicht in der richtigen Reihenfolge geladen habe. Ich schaue in den Entwicklertools auf Ihrer Site. Ich sehe nicht, wo das Pickadate-Plugin überhaupt geladen wird. Ich würde (falls noch nicht geschehen) prüfen, ob das Plugin geladen und in der richtigen Reihenfolge geladen wird. 

1
H0miet

Okay, ich habe vor einiger Zeit das gleiche Problem und die Lösung des Problems besteht darin, den jquery.ui.datepicker.js hinzuzufügen, der im Jquery-Paket enthalten ist. Ich frage mich jedoch immer noch, warum ich dies einbeziehen muss, weil Im jquery.ui vor und der jquery.ui.custom oder einfach die jquery-js-Datei die .datepicker()-Funktion für mich ausführt. 

Trotzdem ist es immer noch schön, dass es jetzt funktioniert. Hoffe das hilft.

Ich habe alle Skripte von der Fußzeile zum Kopf verschoben, und die Dinge funktionierten richtig

0

Ich weiß, dass diese Frage alt ist, aber es kann sein, dass sie anderen Menschen helfen kann:

Die beste Methode, um js in WordPress einzubinden, ist die Verwendung der Warteschlangenfunktion Es in der PHP-Vorlage:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

(gesehen hier )

Hier können Sie die Abhängigkeiten Ihres Skripts angeben, in diesem Fall den Jquery Datepicker. Sie können die integrierten Skripts überprüfen, die Wordpress in folgenden Versionen bereitstellen kann:

https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-inclust-und-registriert-von-wordpress

Wordpress stellt Abhängigkeiten speziell für jquery datepicker bereit, damit Sie Ihr Skript in etwa wie folgt einfügen können:

wp_enqueue_script( 'script', 'mypath' . '/js/script.js', array ( 'jquery', 'jquery-ui-datepicker' ), 1.7, true);

Wenn Sie nur die Jquery-Abhängigkeit deklarieren, erhalten Sie eine Fehlermeldung wie 

'jQuery.datepicker (...) ist keine Funktion'

da die datepicker-Funktionen nicht in der Basis-Wordpres-Jquery enthalten sind.

Ich hatte ein ähnliches Problem, aber nur im Firefox-Browser. Wir benutzen Reques, um die Js-Dateien zu laden. Ich hatte folgende Zeilen in meinem Javascript.

require(['jquery', 'jqueryui'], function ($) {
    $(document).ready(function () {
        $("#form1").validationEngine({ bindButtons: $(".bindButton") });

        $("#txtBidDate").datepicker({dateFormat: 'mm-dd-yy'});
        $("#txtInstDate").datepicker({dateFormat: 'mm-dd-yy'});
    });

Loads js files asynchroulsy erforderlich und die Reihenfolge ist nicht garantiert, es sei denn, Sie definieren die Shim-Konfiguration oder wenn Ihre js-Dateien alle als AMD geladen sind. In unserem Fall wurde Jquery nach Jquery-ui geladen. Wir haben in main.js definiert, dass jquery-ui von jquery abhängig ist. Das hat es für uns behoben

Ich weiß, das ist ein altes Problem. Ich hatte das gleiche Problem und es lag daran, dass jquery.min.js zusammen mit jquery-1.10.2.js und jquery-ui.js enthalten war. Durch das Entfernen von jquery.min.js wurde meine Ausgabe von TypeError: $ (...). Datepicker ist keine Funktion, die behoben wurde. Hoffe es hilft jemandem.

0
Vishal T