Ich habe jquery datepicker Funktionalität in diesem Szenario verloren ...
1- Ursprünglich hatte ich eine normale Ansicht, was gut funktionierte, mit diesem Code für die Datumseingabe ...
%Vor%2- Dann habe ich diese Ansicht in eine Teilansicht konvertiert, die dynamisch mit ... geladen wird.
%Vor%3- Die Teilansicht wird geladen, die Daten können (manuell) eingegeben werden und alles ist in Ordnung. Das einzige Problem ist, dass der jquery Datepicker nicht mehr funktioniert. Ich habe versucht, es nach dem Laden zuzuweisen, mit diesem ...
%Vor%Das hat nicht funktioniert.
4- Später habe ich erfahren, dass jquery die Funktionen live () und delegate () zur Verfügung stellt, die Javascript-Code an Elemente anhängen können, die "jetzt und in Zukunft" geladen werden. Also habe ich das in der Dokumenteninitialisierung versucht ...
%Vor%und später auch ...
%Vor%Keine davon hat funktioniert, vielleicht, weil sie sich direkt auf das Ereignis "click" beziehen, aber der datepicker ist an das ganze Element angehängt (wenn das der richtige Begriff ist).
Also, Frage ist: Wie man den jquery Datepicker an Elementen arbeitet, die nach dem dynamischen Laden geladen werden ???
Danke für Ihre Zeit!
Gelöst: Das Problem war, dass am Ende von _Layout.cshtml diese Zeile ...
liegt %Vor%.. was lädt die verkleinerte Version von jquery-Bibliotheken (bereits von mir selbst referenziert). Also, die Bibliotheken wurden zweimal geladen und wurden ungültig, was den Fehler "datepicker () ist keine Funktion" erzeugt.
Wenn Sie nur diese Zeile kommentieren oder löschen, funktioniert alles gut!
Ihr Vorgehen in # 3 sieht für mich so aus, als hätte es funktionieren sollen, also scheint es, als müssten Sie etwas debuggen. Versuchen Sie Folgendes:
debugger -Zeile hinzu (siehe zum Beispiel unten) Was passieren sollte ist, dass Ihr Browser an diesem Punkt pausiert. Wenn die Dinge jedoch nicht so funktionieren, wie Sie es erwarten, wird dieser Code möglicherweise gar nicht gefunden und Sie erhalten keine Pause.
Wenn Sie eine Pause bekommen, überprüfen Sie den Wert von $("#date_start") ; Es ist möglich, dass der jQuery-Selektor nicht das erreicht, was er zu sein scheint.
Hier ist ein debugger Beispiel mit Ihrem Code:
Auf Ihrer Teilseite sagen Sie "/ MyController / MyAction",
Teilseitencode:
%Vor%Vollständige Seite (Seite von wo Sie Ajax-Anfrage aufrufen) Code:
%Vor%Rufen Sie die Funktion abc auf, und Sie sind fertig. Nehmen Sie an, Sie haben bereits alle jquery-Dateien geladen.
Alles, was Sie tun müssen, um den Datepicker arbeiten zu lassen, sind die Schritte 1-3.
Hier ist ein Beispiel: Ссылка
Sie haben datepicker, um zu arbeiten, ohne das Markup dynamisch zu laden, und Ihr Pseudocode für die dynamische Version ist Sound von den Schritten 1-3. Die Sache, die Sie jetzt überprüfen müssen, ist sicherzustellen, dass Ihre Abhängigkeiten vor Ihrem Hauptprogramm geladen werden (in diesem Fall stellen Sie sicher, dass jquery und jquery ui verfügbar sind, bevor Sie das request + datepicker Setup ausführen).
1) lade jquery 2) Laden Sie jquery ui 3) warte, bis das Dom bereit ist oder das Element, das deine Nutzlast enthalten wird, bereit ist 4) Führe deine Haupt-App aus, die die Schritte 1-3 von deiner Beschreibung aus ausführt.
Es wäre also ungefähr so.
%Vor%Nachdem Sie Ajax aufgerufen haben, verbinden Sie Ihre jquery mit dem 'ajaxStop' Event. (SIEHE: '@ section Scripts')
$ (document) .ajaxStop behandelt den post-ajax-jquery-Aufruf und nun funktioniert datapicker nach ajax-Aufruf (en). ja ...
Hinweis: $ (document) .ready ... behandelt die erste Seite beim Laden der Datapicker-Dekoration, aber nach dem erneuten Laden eines Ajax-Formulars wurde datepicker jquery nicht ausgeführt ...
%Vor%In meinem Fall war die ID des Datumsfelds, an das ich den Datepicker angeschlossen habe, nicht das, was ich dachte. Ich benutze ViewModels und die ID wurde mit dem ViewModel-Namen meiner Teilansicht vorangestellt.
machitghost's Antwort hat mich darauf gebracht.
Also benutze ich Charly's Antwort, aber anstelle von #BirthDate habe ich #IdentityModel_BirthDate:
%Vor%Ich habe das funktioniert
Aktionsmethode:
%Vor%Hauptansicht:
%Vor%Teilansicht:
%Vor%Natürlich müssen Sie daran denken, jquery-ui.js in Ihr Layout aufzunehmen
%Vor% Mein Verdacht ist, dass Ihr JS ausgeführt wird, Sie aber jQuery-ui falsch referenziert haben. Ich empfehle, alle jquery-Bibliotheken auf einer höheren Ebene als eine Teilansicht hinzuzufügen. Versuchen Sie, das <script src="jquery-ui.js"> -Tag entweder auf der Seite oder im Layout zu platzieren, nicht in der Teilansicht. Wenn dies nicht behoben wird, versuchen Sie, alert("test"); in Ihrem JavaScript-Code zu setzen, um sicherzustellen, dass es ausgeführt wird.
Ich hatte genau das gleiche Problem. Wenn Sie ajax verwenden, binden Sie die unten stehende jquery-Funktion an das Dokument. Jedes Mal, wenn AJAX ausgeführt wird, wird dies ausgelöst. Schauen Sie sich das api doc hier an - Ссылка
$ (Dokument) .ajaxComplete (function () {// Ihr Code hier})
Ich hatte das gleiche Problem, gelöst mit einer früheren Version von JQuery-UI . In meinem Fall wird die Version 1.9.2 und 1.10.3 bis JQuery version 1.10.1 verwendet. Kennen Sie den Grund, aber ich denke, dass die neuesten Versionen einige Probleme mit der Kompaktheit bringen, so entschied ich mich, immer rückwärts in die Vergangenheit zu gehen.
Ich hoffe, es wird nützlich sein
Lade einfach diese Zeile mit dem Inhalt, den du mit ajax laden musst
Tags und Links asp.net-mvc javascript jquery