webentwicklung-frage-antwort-db.com.de

Nicht abgerufener TypeError: $ (...). Datepicker ist keine Funktion (anonyme Funktion)

Ich habe ein paar Antworten auf den Stack-Überlauf gefunden, aber ich kann mein Problem immer noch nicht lösen. Ich arbeite mit Django, aber ich glaube nicht, dass es für diesen Fehler relevant ist.

Ich versuche, mein Datumsauswahl-Java-Skript zu bearbeiten, aber ich erhalte den Fehler 

1:27 Nicht abgerufener TypeError: $ (...). Datepicker ist keine Funktion (anonyme Funktion) @ 1: 27fire @ jquery-1.9.1.js: 1037self.fireWith @ jquery-1.9.1.js: 1148jQuery.extend .ready @ jquery-1.9.1.js: 433 fertiggestellt @ jquery-1.9.1.js: 103 jquery-2.1.0.min.js: 4 XHR beendete Laden: POST " https: // localhost: 26143/skypectoc/v1/pnr/parse ". l.cors.a.crossDomain.send @ jquery-2.1.0.min.js: 4o.extend.ajax @ jquery-2.1.0.min .js: 4PNR.findNumbers @ pnr.js: 43parseContent @ contentscript.js: 385processMutatedElements @ contentscript.js: 322

Das sind alle meine Skripte:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script type="text/javascript">
              $(document).ready(function() {
                  $("#extra-content").hide();
                  $("#toggle-content").click(function(){
                      $("#extra-content").toggle();
                  });
              });
 </script>            

jedes feedback wird sehr geschätzt 

14
Ilya Bibik

Was schief gelaufen ist?

Wenn Sie jQuery zum ersten Mal einschließen:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

Das zweite Skript fügt sich in jQuery ein und fügt $(...).datepicker hinzu.

Aber dann fügst du noch einmal jQuery hinzu:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Dadurch wird das Einstecken rückgängig gemacht und $(...).datepicker wird undefiniert.

Obwohl der erste $(document).ready-Block davor erscheint, wird der Rumpf der anonymen Rückruffunktion nicht ausgeführt, bis alle Skripts geladen sind. Bis dahin verweist $(...) (window.$) auf die zuletzt geladene jQuery.

Sie würden nicht darauf stoßen, wenn Sie $('.dateinput').datepicker sofort und nicht in $(document).ready callback aufgerufen hätten. Dann müssen Sie jedoch sicherstellen, dass das Zielelement (mit der Klasse dateinput) bereits vor dem Skript im Dokument enthalten ist und im Allgemeinen empfohlen wird der ready Rückruf.

Lösung

Wenn Sie datepicker von jquery-ui verwenden möchten, ist es wahrscheinlich am sinnvollsten, das jquery-ui-Skript nach bootstrap einzuschließen. jquery-ui 1.11.4 ist mit jquery 1.6+ kompatibel, so dass es einwandfrei funktioniert.

Alternativ (insbesondere wenn Sie jquery-ui nicht für etwas anderes verwenden) können Sie bootstrap-datepicker versuchen.

48
szym

wenn Sie ASP.NET MVC verwenden

Öffnen die Layoutdatei "_Layout.cshtml" oder Ihre benutzerdefinierte

Im Teil des Codes sehen Sie wie folgt:

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

Entfernen die Zeile " @ Scripts.Render (" ~/bundles/jquery ") "

(an dem Teil des Codes, den Sie sehen) vorbei als die neueste Zeile, wie unten:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")

Das hilft mir und die Hoffnung hilft dir auch.

0
Mauro Candido

Der Fehler liegt darin, dass Sie die Skriptverknüpfungen an zwei Stellen einfügen, wodurch die Datumsauswahl überschrieben und erneut initialisiert wird

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

So schließen Sie entweder src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" aus.

or src = "http://code.jquery.com/ui/1.11.0/jquery-ui.js"

Es wird klappen..

0
anvesh

Das Hinzufügen mehrerer Verweise auf die Jquery-Bibliothek ist der Grund für den Fehler Fügen Sie nur einen Verweis auf die Jquery-Bibliothek hinzu, wodurch das Problem behoben wird.

0

Sie müssen nur drei Datei- und zwei CSS-Links hinzufügen. Sie können entweder cdn's auch . Links für die js-Dateien und die css-Dateien sind wie folgt: - 

  1. jQuery.dataTables.min.js
  2. dataTables.bootstrap.min.js
  3. dataTables.bootstrap.min.css
  4. bootstrap-datepicker.css
  5. bootstrap-datepicker.js

Sie sind gültig, wenn Sie in Ihrem Projekt Bootstrap verwenden.

Ich hoffe, das wird Ihnen helfen .... Grüße.... Vivek Singla

0
user8994237