Nicht selten sind es die kleinen Änderungen, die plötzlich mehr Zeit verschlingen als erwartet.
Die Aufgabe:
Wenn man bei einem Radiobutton einen neuen Wert auswählt, soll über eine Dialogbox nachgefragt werden, ob man dies wirklich ändern will.
Überlegt es sich der Anwender noch einmal anders, so soll der neue Wert ignoriert werden.
Auf den ersten Blick sieht dies nach einer Aufgabe aus, die schnell erledigt ist.
Doch wie so oft liegt die Tücke im Detail.
Zunächst wartet bei den Events eine Überraschung:
Der IE (8 & 9) ignoriert unter XPages beim RadioButton das onChangeEvent()
Somit darf das onChangeEvent über das onClick Event nachgebildet werden.
Beim onClick-Event muss berücksichtigt werden, dass dieses bei der Auswahl eines neuen Wertes zweimal durchlaufen wird.
Einmal mit dem alten und einmal mit dem neuen Wert.
Den alten Wert der RadiobuttonGroup erhält man über folgenden Ausdruck:
alterwert = '#{javascript:getComponent("radioGroup1").getValue();}';
Beim Versuch den neuen Wert zu ermitteln, wartet dann die nächste Überraschung.
Einige empfehlen hier folgende Variante:
var elements = dojo.byId(id);
for(i=0;i<elements.elements.length;i++) {
if (elements[i].value == value) {
elements[i].checked = true;
}
}
Kleiner Schönheitsfehler: Dies klappt zwar mit dem Firefox einwandfrei aber der IE (8 & 9) hält von dieser Variante nichts. Das Element daß der IE zurückgibt enthält schlichtweg keine Elemente durch die man sich durchhangeln könnte.
Allerdings kann man sich recht elegant mit dojo.query den Wert des aktuell ausgewählten Radiobuttons holen:
elements = dojo.query('INPUT[type=radio][name=#{id:radioGroup1}]:checked');
neuerWert = elements[0].value;
Das Deaktivieren eines Radiobuttons ist mit dojo.query nicht mehr als ein Einzeiler:
dojo.query('INPUT[type=radio][name=#{id:radioGroup1}]:checked').forEach(function(n) {n.checked=false;});
Und auch das Setzen eines radiobuttons (z.B. den alten Wert) ist nicht mehr als eine Zeile
dojo.query('INPUT[type=radio][name=#{id:radioGroup1}][value='+alterwert+']').forEach(function(n) {n.checked=true;});
Die dojo.query-Varianten funktionieren mit Firefox und mit dem IE.