XPages onClick partial refresh bug with radio buttons

by Bernd Hort,
assono GmbH, Standort Hamburg,

XPages

There is a nasty bug in XPages with radio buttons and a partial refresh in the onClick event if the user clicks on the label instead of radio itself.

For a short moment the change in the state of the radio button is visible and then directly afterwards the original state is shown after the partial refresh kicks in. We have prepared a little video to show the effect.

The reason for this effect is timing. When the user clicks on the label the post command is issued for the partial refresh. At that moment the attribute change of the radio button is not through. So the old value is transmitted within the post. This is the reason that after the partial refresh magically the original state is shown.

IBM is aware of the bug: LO71073: XPAGES RADIOBUTTON CLICK ON LABEL UNDONE BY PARTIAL REFRESH. The current state is: "This APAR is closed as FIN. We have deferred the fix to a future release." I like that IBM explains the acronym FIN after using it. Dojo

So until this bug is fixed from IBM we can fix it ourselves with a little help from dojo.

The following code has to be placed in the client side JavaScript onClick event.

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;

First we assign the event to the variable e. With dojo.fixEvent(e) we take care of the slightly different event handling in IE.

In case a user clicks on the label (e.target.type != "radio"), we stop the default event handling (e.preventDefault()). After that we change the attribute of the input element to checked.

The dojo.query works because the XPages runtime generates the HTML like this:

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

The input element is a child element to the label element. With dojo.query("input", e.target) dojo searchs for all input elements underneath the element that triggered the event. In our case the label element.

Btw always use the onClick event with radio buttons and check boxes. The IE browser generally has a timing problem with the onChange event. The attribute changes are only visible after the onChange event has been fired.

Technical article JavaScript XPages

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

Do you want an individual solution? Contact us

More interesting entries

Any questions? Contact us.

If you want to know more about our offers, you can contact us at any time. There are several ways to contact us for a non-binding first consultation.

We don’t sell your data. 100% guaranteed. See: Privacy Policy
assono GmbH

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

Location Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Phone numbers:
Human resources department: +49 4307 900 407
Marketing department: +49 4307 900 402

E-Mail adresses:
contact@assono.de
bewerbung@assono.de