Ich habe eine Webseite, die mehrere Instanzen von jQuery ui datepicker verwendet. Meine Webseite zeigt ~ 80 Datensätze an, die über einen einzelnen Screenshot hinausgehen.
%Vor%Ich habe die Standardeinstellungen meines Datepickers wie folgt festgelegt:
%Vor%Wenn die Seite zum ersten Mal geladen wird und ich auf ein Datumsauswahl-Symbol klicke, das auf dem Bildschirm sichtbar ist ( d. h. ohne Bildlauf ), erscheint der Datumsauswahl wie erwartet.
Wenn ich jedoch einen Bildlauf durch die Seite führe und dann auf ein Datumsauswahl-Symbol klicke, wird der Datumswähler nicht im Bildschirmfenster angezeigt, sondern wird rechts oben am Bildschirm wiedergegeben.
Irgendwelche Ideen, wie man das löst?
Ich verwende:
Ich denke, ich habe es geschafft, mein Problem zu lösen, aber gleichzeitig denke ich, dass ich einen Bug (?) im jquery ui datepicker code entdeckt habe.
Bevor ich weiter gehe, lass mich einfach sagen, dass ich neu bei jquery / javascript bin und würde mich über jede Eingabe auf dem folgenden freuen.
Um das Problem zu rekapitulieren, verwende ich asp.net mvc und ich versuche, ~ 80 Datepickers auf einer Seite zu zeigen. Für jeden Datapicker im ersten Ansichtsfenster sind die Datumseinstellungen in Ordnung. Wenn ich jedoch einen Bildlauf nach unten durchführe, werden die Datumsauswahlpunkte immer noch oben auf dem Bildschirm wiedergegeben.
Ich habe angefangen, den Quellcode zu sehen und etwas zu debuggen. Was ich bemerkte, war, dass das Ausmaß, in dem der Datepicker zum oberen Rand des Bildschirms versetzt wurde, direkt proportional zu dem Betrag war, um den ich gescrollt hatte, d. H. Mehr scroll = größer offset.
Das Schlüsselproblem im Code, den ich gefunden habe (siehe unten), ist, dass wenn der Code herausfindet, wo der Datepicker positioniert werden soll, er nicht berücksichtigt, wie weit der Benutzer auf dem Bildschirm gescrollt hat:
%Vor%In der letzten Zeile berücksichtigt die offsetHeight-Methode nicht, um wie viel Sie den Bildschirm nach unten gescrollt haben.
Wenn Sie diese Zeile auf Folgendes aktualisieren, löst dies das Problem, das ich angesprochen habe:
%Vor%Dies ruft einfach die Position der Bildlaufleiste auf und fügt sie zu offsetHeight hinzu, um die richtige Position zu erhalten.
Im Interesse einer vollständigen Offenlegung bin ich mir nicht ganz sicher, warum das funktioniert, und würde mich über einige Erkenntnisse freuen.
Ich habe ~ 3 Tage mit diesem Thema verbracht und das Internet recherchiert und das ist das Beste, was ich mir vorstellen kann.
Interessanterweise gab es in den jquery-Foren eine ähnliche Abfrage:
Klicken Sie hier, um anzuzeigenLesen Sie den Bericht, der darauf hindeutet, dass der Fehler in einer früheren Version auf 1.8 behoben wurde?
Danke
Ich hatte das gleiche Problem, ich benutze IE9, aber stattdessen document.documentElement.scrollTop bearbeite ich die folgende Zeile auf meinem JS-Code
Das liegt daran, dass document.documentElement.scrollTop 0 zurückgibt, für mich löst der obige Code mein Problem
Ich hatte diese Probleme auch in IE 9 und kann Ihnen nicht genug für Ihre kollektive Hilfe danken. Chrome 22.0.1229.94 m und FF 15.0.1 zeigten dieses Problem nicht für mich.
Ich habe zuerst versucht, die IE 8-Emulation mit einem Meta-Tag zu erzwingen
%Vor%ohne Erfolg.
Ich habe dann die jquery.ui.datepicker.js -Datei wie vorgeschlagen bearbeitet, um die Positionshöhe anzupassen, indem Sie das Scrollen berücksichtigen. Das hat auch nicht funktioniert.
Schließlich habe ich meinen Doctype von
geändert %Vor%bis
<!DOCTYPE html>
was erfolgreich funktioniert hat !!
Ich habe das Meta-Tag entfernt, das die IE 8-Emulation erzwungen hat, behielt aber die Änderungen bei, die ich an der Datepicker-js-Datei vorgenommen habe. Mein Erfolg könnte eine Kombination der bearbeiteten js und der Änderung in doctype oder nur der Änderung in doctype sein.
Ich habe das gleiche Problem mit der jQuery UI Version 1.9.2 und IE9 festgestellt.
Es scheint eine Funktion in der jQuery UI namens _checkOffset zu geben, die dieses Problem beheben soll. Es funktioniert nicht.
Er versucht, $(document).scrollTop() zu verwenden, was in IE9 immer 0 zurückgibt.
Ich musste den Inhalt der Funktion ändern, um stattdessen document.body.scrollTop zu verwenden, wenn die jQuery-Funktion null zurückgibt. Ersetzen Sie also
mit
%Vor% überall in _checkOffset , um jQuery UI zu 'reparieren' und es richtig funktionieren zu lassen.
Aktualisieren Sie in Jquery.UI einfach die Funktion _checkOffset, sodass viewHeight zu offset.top hinzugefügt wird, bevor offset zurückgegeben wird.
Skript: datepicker.js
Ich bin mir nicht sicher, ob das das Problem sein würde, aber Sie fügen den Datapicker nicht standardgemäß hinzu. Sie müssen nicht mit .each ();
iterieren %Vor%Wenn möglich, sollten Sie immer einen Tag-Namen vor einen Klassenselektor setzen, da dies den Auswahlprozess beschleunigt.
Ich bin in einer App, an der ich arbeite, auf das gleiche Problem gestoßen und habe eine Lösung gefunden. Die Anwendung enthielt keine korrekte doc-type-Spezifikation und alles, was benötigt wurde, war, sie oben auf der Seite hinzuzufügen.
%Vor%Hoffe, das hilft.
Hey, hier ist ein Hack, mit dem wir dieses Problem lösen können.
%Vor%Probieren Sie es aus, es hat für mich funktioniert:)
Gehen Sie zuerst hierhin und formatieren Sie Ihre js-Datei in Javascript Beautifier
Gehen Sie dann zu Zeile 445
%Vor%Das Datapicker-UI-Popup kann durch Hinzufügen des folgenden Codes ziehbar gemacht werden:
$ ('# ui-datepicker-div'). draggable ();
Da diese ID für das Komponentendiv gilt, das für alle Popup-Datumsauswahl auf der Seite erstellt wurde. Während:
$ (". ui-datepicker"). draggable ()
Gilt für alle Datumsauswahl auf einer Seite (ob Popup oder Inline). Wenn Sie das Panel ziehbar machen, können Sie den Datepicker normalerweise ohne Scrollen an der gewünschten Stelle positionieren.
Tags und Links jquery jquery-ui datepicker