CODEWITHSUNDEEP
javascriptxpages
VladP
VladP

Reputation: 901

xPages radiobutton group onchange event doesn't work

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>

Upvotes: 1

Views: 376

Answers (2)

Knut Herrmann
Knut Herrmann

Reputation: 30970

Your example does work if you click on radio enter image description here 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>

Upvotes: 2

Howard
Howard

Reputation: 1503

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

Upvotes: 0

Related Questions