I have created a simple page with a listbox control that should update its values based on the selection made in a radiobutton group. The listbox is connected to a scope variable array as its data source. However, I am experiencing an issue where the listbox values do not refresh consistently after clicking on the radiobutton. It works initially, then stops refreshing, then starts working again. Can anyone help me identify what I am 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>