XPages onClick Partial-Refresh Bug bei Radio-Buttons

von Bernd Hort,
assono GmbH, Standort Hamburg,

In XPages gibt es bei Radio-Buttons im Zusammenhang mit einem Partial-Refresh bei einem onClick-Event einen ziemlich irreführenden Bug, wenn der Anwender auf das zugehörige Label klickt statt auf den Radio-Button selber.

Unmittelbar nach dem Anwender auf das Label geklickt hat, erscheint kurz die Änderung, um danach unmittelbar wieder den alten Stand anzuzeigen. Zur Verdeutlichung haben wir ein kleines Video vorbereitet.

Die Ursache für dieses Phänomen ist das Timing. Durch den Klick auf das Label, wird ein POST-Befehl für das Partial-Refresh ausgelöst. Zu diesem Zeitpunkt ist allerdings die Attributänderung des Radio-Buttons noch nicht angekommen, so dass noch der alte Werte übertragen wird. Das ist auch der Grund, warum magischer Weise über das Partial-Refresh der alte Stand wieder angezeigt wird.

Der Bug ist bei der IBM bekannt: LO71073: XPAGES RADIOBUTTON CLICK ON LABEL UNDONE BY PARTIAL REFRESH. Der aktuelle Status ist: "This APAR is closed as FIN. We have deferred the fix to a future release." Wobei FIN laut dem IBM Software Support Handbook für "der Fehler wird im nächsten Release gefixt" steht.

Dojo

In der Zwischenzeit kann, wie so häufig, mit Hilfe von dojo Abhilfe geschaffen werden.

Der folgende Code sollte im Client-Side JavaScript onClick-Event hinterlegt werden.

var e = arguments[0] || window.event;
e = dojo.fixEvent(e);
if (e.target.type != "radio") {
  e.preventDefault();
  dojo.query("input",e.target).forEach(function(inputNode){
    dojo.attr(inputNode,"checked",!(dojo.attr(inputNode,"checked")));
  });
}
return true;

Das Event wird zunächst in der Variable e gespeichert. Mit dojo.fixEvent(e) wird der Unterschied im Eventhandling zwischen IE und den standardkonformen Browsern nivelliert.

Wenn auf das Label geklickt wurde (e.target.type != "radio"), dann wird zunächst das Standardverhalten des Events unterbunden (e.preventDefault()). Anschließend wird das zugehörige Input-Feld gesucht und das Attribute auf "checked" gesetzt.

Der dojo.query-Befehl funktioniert, weil die XPages Laufzeitumgebung ein Radio-Button wie folgt realisiert:

<label>
  <input type="radio" value="Banana" name="view:_id1:radioGroup1">Banana
</label>

Das Input-Element ist also ein Kindelement des geklickten Labels. Somit kann über dojo.query("input", e.target) nach allen Input-Elementen unterhalb des  Elementes gesucht werden, auf den das Event ausgelöst wurde. In unserem Fall also das Label.

Es sollte übrigens bei Radiobuttons und Checkboxes immer das onClick-Event verwendet werden, weil der IE beim onChange-Event ebenfalls ein Timing-Problem hat. Wenn im IE das onChange-Event ausgelöst wird, ist die Attributänderung auch noch nicht vollzogen.

Fachbeitrag JavaScript XPages

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Sie wollen eine individuelle Lösung? Kontaktieren Sie uns

Weitere interessante Artikel

IBM Cognos Analytics 11.0.9 (R9)

IBM Cognos Analytics 11.0.9 (R9)

Erst Mitte November hatten wir über Neuerung in der Version 11.0.8 gebloggt. Knapp ein Monat später veröffentlicht IBM die Version 11.0.9 … Mehr

von
Filip Meyer
,

Sie haben Fragen? Wir sind für Sie da.

Wenn Sie mehr über unsere Angebote erfahren möchten, können Sie uns jederzeit kontaktieren. Sie können uns auf verschiedene Weisen für eine unverbindliche Erstberatung erreichen:

assono GmbH

Standort Kiel (Zentrale)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Standort Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Telefonnummern:
Zentrale: +49 4307 900 407
Techn. Hotline: +49 4307 900 403
Vertrieb: +49 4307 900 402

E-Mail-Adressen:
kontakt@assono.de
bewerbung@assono.de