John Glabb John Glabb - 7 months ago 16
Javascript Question

CSJS doesn't update property that was set by SSJS

Here is (Yes/No) radio button onChange event CSJS that disables/enables another 'inputOtherRadio' radio button. And it works perfect:

rObj = dojo.query("[id$=':inputOtherRadio']");
if(thisEvent.target.value=="Y"){
rObj.disabled = true;
} else {
rObj.disabled = false;
}


But if I set xPage 'inputOtherRadio' component Disable property = true then the code above doesn't work (it doesn't undisable ...)

<xp:radioGroup id="inputOtherRadio" disabled="true">
<xp:selectItem itemLabel="Yes" itemValue="Y" id="selectItem11"></xp:selectItem>
<xp:selectItem itemLabel="No" itemValue="N" id="selectItem12"></xp:selectItem>
</xp:radioGroup>


How to make CSJS code work for disabled component?

Answer

Change your CSJS code in first radio button to

<xp:radioGroup id="mainRadio" defaultValue="N">
    <xp:selectItem itemLabel="Yes" itemValue="Y"></xp:selectItem>
    <xp:selectItem itemLabel="No" itemValue="N"></xp:selectItem>
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[return false;]]></xp:this.script>
    </xp:eventHandler>
    <xp:eventHandler event="onchange" submit="false">
        <xp:this.script><![CDATA[
            options = dojo.query("[name$=inputOtherRadio]");
            for(i=0; i < options.length; i++) {
                if(thisEvent.target.value=="N"){    
                   options[i].disabled = true;
                } else {
                   options[i].disabled = false;
                }
            }
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:radioGroup>

The radio button control gets rendered to

enter image description here

and as you can see the disabled property is assigned to input elements "Yes" and "No" and not to the whole radio button control. That's why you have to set disabled property for every option.

Comments