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

Question

这是我的简单页面，其中包含一个列表框控件，该控件应根据单选按钮组选择刷新其值。列表框使用范围变量数组作为源。因此，当我单击单选按钮时，我想更改列表框的值。它在第一次/第二次单击后工作然后它不刷新列表框然后它再次工作。我做错了什么？

<?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

如果您单击 radio ，您的示例确实有效本身，但如果您点击标签，则“点击太晚”。

This is an onClick partial refresh bug with radio buttons .

将以下 CCJS 代码添加到 onClick 事件:

    <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>