xPages单选按钮组的onchange事件不起作用

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>

Answer 1

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>

Answer 2

Radio button events can be strange with certain browsers (IE). Do you have this setting in your xsp properties file?

http://www-01.ibm.com/support/docview.wss?uid=swg21631834

Don't use both onclick and on change.

Howard