xPages radiobutton group onchange event doesn't work

Question

Here is my simple page whit a listbox control that should refresh its values according to the radiobutton group selection. The list box uses a scope variable array as a source. So when I click on the radiobutton I want to change list box values. It works after first/second click then it does not refresh list box then it works again. What am I doing wrong?

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.MYARRAY = new Array();
viewScope.MYARRAY.push(["NAME1", "ID1"]);
viewScope.MYARRAY.push(["NAME2", "ID3"]);
viewScope.MYARRAY.push(["NAME3", "ID4"]);
viewScope.MYARRAY.push(["NAME4", "ID5"]);}]]>
</xp:this.beforePageLoad>

<xp:radioGroup id="radioGroupSortBy" defaultValue="0">
    <xp:selectItem itemLabel="by Name" itemValue="0"></xp:selectItem>
    <xp:selectItem itemLabel="by Id" itemValue="1"></xp:selectItem>
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="listBox1">
        </xp:eventHandler>
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="listBox1">
        </xp:eventHandler>
</xp:radioGroup>

<xp:listBox id="listBox1" style="width:390.0px;height:166.0px">
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:var arr = new Array();
            for(var i=0; i<viewScope.MYARRAY.length; i++){
                if(getComponent("radioGroupSortBy").getValue()==0){
                    arr.push(viewScope.MYARRAY[i][0] + " - " + viewScope.MYARRAY[i][1]);
                } else {
                    arr.push(viewScope.MYARRAY[i][1] + " - " + viewScope.MYARRAY[i][0]);
                }
            }
            return arr.sort();}]]>
        </xp:this.value>
    </xp:selectItems>
</xp:listBox>
</xp:view>

Knut Herrmann Knut Herrmann · Accepted Answer · 2016-10-14T20:04:27

Your example does work if you click on radio itself but it is "one click too late" if you click on label.

This is an onClick partial refresh bug with radio buttons.

Add following CCJS code to onClick event:

    <xp:eventHandler event="onclick" submit="true"
        refreshMode="partial" refreshId="listBox1">
        <xp:this.script><![CDATA[
            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;
        ]]></xp:this.script>
    </xp:eventHandler>

xPages radiobutton group onchange event doesn't work

2 Answers