jQuery UI datepicker: onSelect zweimal genannt

Bemerkte ich ein seltsames Verhalten mit dem jQuery datepicker onSelect-Methode können Sie einen Blick auf diese Geige, um es zu testen.

Getestet mit jQuery 1.7.2 und jQuery-UI-1.8.18, passiert in Firefox, IE und Chrome.

Szenario:

legen den Fokus auf das text-Feld (die Datumsauswahl angezeigt werden soll)
drücken Sie die EINGABETASTE, um wählen Sie die Standard-Datum (wie das datepicker-API sagt, dass es getan werden kann)
beachten Sie, dass onSelect wird zweimal genannt.

Alles funktioniert gut, wenn Sie ein Datum auswählen, mit der Maus.

Ist das ein bug? Wenn nicht, wie kann ich vermeiden, dass dieses Verhalten? Vielen Dank für Ihre Hilfe.

Ich bin auf mac osx safari Version 5.1.6 nur eine wählen ? hmmm
scheint gut zu funktionieren
Ja, es ist passiert in meinem firefox 11.0. Nicht sicher, warum.

InformationsquelleAutor Virginie | 2012-07-04

1

Ich habe einen Lösung Vorschlag, der ist so hässlich, ich bin halb beschämt, um es zu veröffentlichen. Allerdings verzweifelten Zeiten erfordern verzweifelte Maßnahmen.
```
var trigger = false;
var previousDate = "";

$("#datepicker").datepicker({

    onSelect: function(dateText, inst) {

        if (!trigger || (previousDate != dateText)) {
            //Do whatever you want to do
            alert("fire!");
            //I decided to alert
            trigger = true;
            previousDate = dateText;
        } else {
            trigger = false; 
        }
    }
});
```
Probieren Sie etwas wie dieses. Ich hatte ein paar Minuten, um es zu testen und es scheint zu funktionieren. Verbessern auf die Idee, wenn nicht.

Werde ich erklären, wenn Sie nicht verstehen, die schreckliche, hässliche Gedanke, der hinter dem hack.

Cheers.
- Ja, ich habe diese Art von Abhilfe, Ereignis, wenn es ist hässlich, es ist Arbeit... Aber ich musste setTimeout(function() { trigger = true; }, 1000);, die ist noch hässlicher. Wenn ich das nicht getan hätte, war die Methode noch zweimal gezündet.
- Ich habe geändert meine Antwort um dieses problem zu beheben. Es kann Ihnen dabei helfen.
InformationsquelleAutor Nemanja

Ja du hast Recht, auch ich habe diesen Fehler einige Zeit zurück, aber nur vernachlässigt, es.
Aber dieses mal schaute ich in das datepicker-script gefunden, wo ich, wie es vielleicht sein Fehler. Dies ist reproduzierbar in bestimmter Art und Weise nur, wie Sie erwähnt haben

Klicken Sie auf das Feld/bringen Sie konzentrieren sich auf es von Sie mit den tab -
drücken Sie die EINGABETASTE

Haben Sie callback-Funktion 'onSelect' zweimal angerufen.

Dies ist, weil in datepicker javascript '_selectDate" - Funktion wird verwendet, um das ausgewählte Datum wird von key-event-handler-Funktion(_doKeyDown()->_selectDay()->_selectDate()) und beide Funktionen
ruft das call-back-Funktion, die scheint, sein Fehler.

Updates -

Habe ich geändert, die Funktion in _doKeyDown jquery.ui.datepicker.js Datei. Habe ich geändert, der code beim Ereignis enter(keycode-13). So, jetzt callback-Funktion 'onSelect' wird aufgerufen, sobald im oben genannten Szenario.

Hier ist der code für version 1.8.21

_doKeyDown: function(event) {
        var inst = $.datepicker._getInst(event.target);
        var handled = true;
        var isRTL = inst.dpDiv.is('.ui-datepicker-rtl');
        inst._keyEvent = true;
        if ($.datepicker._datepickerShowing)
            switch (event.keyCode) {
                case 9: $.datepicker._hideDatepicker();
                        handled = false;
                        break; //hide on tab out
                case 13: var sel = $('td.' + $.datepicker._dayOverClass + ':not(.' + 
                                    $.datepicker._currentClass + ')', inst.dpDiv);
                        //Update by Sunil start
                        if (sel[0]){
                            $.datepicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, sel[0]);
                        }else{
                            $.datepicker._hideDatepicker();
                            return true;
                        }
                        //Update by Sunil end
                        return false;
                        break; //select the value on enter
                case 27: $.datepicker._hideDatepicker();
                        break; //hide on escape
                case 33: $.datepicker._adjustDate(event.target, (event.ctrlKey ?
                            -$.datepicker._get(inst, 'stepBigMonths') :
                            -$.datepicker._get(inst, 'stepMonths')), 'M');
                        break; //previous month/year on page up/+ ctrl
                case 34: $.datepicker._adjustDate(event.target, (event.ctrlKey ?
                            +$.datepicker._get(inst, 'stepBigMonths') :
                            +$.datepicker._get(inst, 'stepMonths')), 'M');
                        break; //next month/year on page down/+ ctrl
                case 35: if (event.ctrlKey || event.metaKey) $.datepicker._clearDate(event.target);
                        handled = event.ctrlKey || event.metaKey;
                        break; //clear on ctrl or command +end
                case 36: if (event.ctrlKey || event.metaKey) $.datepicker._gotoToday(event.target);
                        handled = event.ctrlKey || event.metaKey;
                        break; //current on ctrl or command +home
                case 37: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, (isRTL ? +1 : -1), 'D');
                        handled = event.ctrlKey || event.metaKey;
                        //-1 day on ctrl or command +left
                        if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ?
                                    -$.datepicker._get(inst, 'stepBigMonths') :
                                    -$.datepicker._get(inst, 'stepMonths')), 'M');
                        //next month/year on alt +left on Mac
                        break;
                case 38: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, -7, 'D');
                        handled = event.ctrlKey || event.metaKey;
                        break; //-1 week on ctrl or command +up
                case 39: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, (isRTL ? -1 : +1), 'D');
                        handled = event.ctrlKey || event.metaKey;
                        //+1 day on ctrl or command +right
                        if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ?
                                    +$.datepicker._get(inst, 'stepBigMonths') :
                                    +$.datepicker._get(inst, 'stepMonths')), 'M');
                        //next month/year on alt +right
                        break;
                case 40: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, +7, 'D');
                        handled = event.ctrlKey || event.metaKey;
                        break; //+1 week on ctrl or command +down
                default: handled = false;
            }
        else if (event.keyCode == 36 && event.ctrlKey) //display the date picker on ctrl+home
            $.datepicker._showDatepicker(this);
        else {
            handled = false;
        }
        if (handled) {
            event.preventDefault();
            event.stopPropagation();
        }
    },

Ich hoffe, das würde dein problem lösen.

Update 2
Gibt es eine andere Lösung als beantwortet user1042031 aber nicht die vollständige Lösung. Hier finden Sie, was Sie tun müssen,

$("#datepicker").datepicker({
     onSelect: function(dateText,inst) {       
         $.datepicker._hideDatepicker();
         inst.preventDefault();
    }
});

Entfernen müssen alert die Ursachen, setzen Sie den Fokus auf Eingabefeld zeigen datepicker wieder. Dieser Aufruf onSelect einmal für sicher versteckt das datepicker-nach drücken der enter-Taste.

DEMO

Kopiere ich den Teil der Lösung zu haben, nur um Sie arbeiten beide Möglichkeiten 🙂

Schöne Arbeit, aber ich würde lieber nicht den Quellcode ändern; ich will nicht, dass dieses Problem wieder auftauchen, wenn jemand änderungen/Aktualisierungen der datepicker-Datei. Trotzdem danke
Ich habe aktualisierte Kodex umfasst workaround

InformationsquelleAutor Sunil Chavan

0

Verwenden
```
 inst.preventDefault();
```
wie diese:
```
  $("#datepicker").datepicker({
     onSelect: function(dateText,inst) {       
         alert('s');
         inst.preventDefault();
    }
}); 
```
EDIT : so entfernen Sie den Kalender nach Auswahl von Datum

eine Arbeit um Sie verwenden müssen, removeclass:
```
 $( "#datepicker" ).datepicker({

       onSelect: function(dateText, inst) {          
       $(inst.dpDiv).find('.ui-state-highlight.ui-state-hover').removeClass('ui-state-highlight ui-state-hover');          

 },
});
```
- Toll, es scheint die perfekte Lösung! Ich hatte das Gefühl ich würde zu tun haben, mit preventDefault() aber nicht wissen, wie es zu handhaben. Danke!
- Cool !! Marke anwsered wenn Sie einverstanden sind 🙂
- UPDATE: ich habe zu schnell gewesen: es ist fast die perfekte Lösung. Keinen zweiten nennen, ABER der datepicker nicht mehr zu verstecken, sobald Sie das Datum ausgewählt ist. Netter Versuch 🙂
- Sie müssen entfernen Sie den datepicker einmal das Datum ausgewählt, aber war Ihre qn ist zu feuern zweimal oder entfernen der datepicker?
- fügen Sie"$.datepicker._hideDatepicker (); " vor dem Aufruf von preventDefault(). Entfernen Sie die Warnung, denn es führt zum setzen des Fokus auf Eingabefeld zeigen datepicker wieder. 🙂 Sogar meine Antwort ist auch akzeptabel 🙂
- Meine Frage war über das doppelte feuern, während die Standard-Verhalten des datepicker, das ist zu verschwinden, nachdem das Datum ausgewählt wurde. Die Mischung zwischen Ihrer Lösung und @SunilChavan 's ist die eleganteste Art und Weise.
InformationsquelleAutor Suave Nti
0

Die beste Lösung bisher:
```
$("#datepicker").datepicker({
    onSelect: function(dateText, inst) {
        //do stuff
        $.datepicker._hideDatepicker();
        inst.preventDefault();
    }
```
});

inst.preventDefault()ist der wichtigste Teil: es verhindert, dass der Doppel-Entlassung von onSelect(). Durch die Benutzung der datepicker nicht mehr zu verstecken, sobald Sie das Datum ausgewählt ist, so haben Sie zu nennen $.datepicker._hideDatepicker() es zu tun.

Dank user1042031 und Sunil Chavan.
- Ich habe bereits aktualisiert, gleiche Antwort in meinem post. Auch meine Antwort erklärt auch die Ursache des Problems und deren Update sowie als workaround.. 🙁
InformationsquelleAutor Virginie

Scheint mir ein bug... ich habe diese gebunden, die in alle möglichen asynchronen Aufrufe und es vermasselt alles... beste Lösung die ich fand ist dies:

jQuery(".date-picker").each(function (index, item) {
    jQuery(item).removeClass("date-picker");
     item.ondpchange = item.onchange;
    jQuery(item).datepicker({
        format: "mm/dd/yyyy",
        autoclose: true,
        todayHighlight: true,

    }).on('changeDate', function (e) {
        if (item.ondpchange != null) {
            item.ondpchange();
        }
    });;
    item.onchange = null;


});

InformationsquelleAutor Jim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.