Xpages: Hide/Show div based on radio button values

Question

I am binding all of my components to a java source. One field is a radio button, and if the user selects "Other" as a value, then I must show an field labeled "Other" for the user to fill in.

I cannot use SJSS to get the value of the radio button as it doesn't exist yet. But then how do I found out what the user selected? In the change event should I set a viewScope var and refresh the secondary area and check for the value of the viewScope var?

                               <xc:cc_CommonFormField
                                    id="cc_CommonFormField14"
                                    label="Savings"
                                    placeholder="">
                                    <xp:this.facets>

                                        <xp:radioGroup
                                            xp:key="field"
                                            id="radioGroup1"
                                            value="#{doc.prjSav}">

                                            <xp:selectItem
                                                itemLabel="Financial"
                                                itemValue="Financial">
                                            </xp:selectItem>
                                            <xp:selectItem
                                                itemLabel="Safety"
                                                itemValue="Safety">
                                            </xp:selectItem>

             <xp:eventHandler
                                                 event="onchange"
                                                 submit="true"
                                                 refreshMode="partial" refreshId="refresh1">
                                        </xp:eventHandler>
                                    </xp:radioGroup>
                                    </xp:this.facets>



<div id = "refresh1">
    <div id = "innerRefresh"
        rendered="#{javascript:what to put here}">
  </xc:cc_CommonFormField>
                                <xc:cc_CommonFormField placeholder="Enter Other Reason...">
                                    <xp:this.facets>
                                        <xp:inputText
                                            id="inputText3"
                                            xp:key="field"
                                            value="#{doc.prjOther}">
                                        </xp:inputText>
                                    </xp:this.facets>
            </xc:cc_CommonFormField>
        </div>
</div>

Here is the code that is correct:

<xc:cc_CommonFormField
                                    id="cc_CommonFormField14"
                                    label="Savings and/or Revenue From the Project"
                                    placeholder="">
                                    <xp:this.facets>
                                        <xp:radioGroup
                                            xp:key="field"
                                            id="radioGroup1"
                                            value="#{doc.prjSav}">
                                            <xp:selectItem
                                                itemLabel="Financial"
                                                itemValue="Financial">
                                            </xp:selectItem>
                                            <xp:eventHandler
                                                event="onclick"
                                                submit="true"
                                                refreshMode="norefresh">
                                                <xp:this.script><![CDATA[var result=null;

for(var i=0; i<document.forms[0].elements.length; i++){
    if(document.forms[0].elements[i].name=="#{id:radioGroup1}" ){

        if(document.forms[0].elements[i].checked == true){
            result=document.forms[0].elements[i].value;
            break; //remove this if for check box groups and collect multiple values above instead
}}}

var sel = x$("#{id:innerRefresh}");

if (result == "Other")
{
x$("#{id:innerRefresh}").removeClass("scoHidden");
x$("#{id:innerRefresh}").addClass("scoVisible");
}
else
{
x$("#{id:innerRefresh}").removeClass("scoVisible")
x$("#{id:innerRefresh}").addClass("scoHidden");
}

XSP.partialRefreshGet("#{id:innerRefresh}")]]></xp:this.script>
                                        </xp:eventHandler></xp:radioGroup>
                                    </xp:this.facets>
                                </xc:cc_CommonFormField>
                                <div id="refresh1">
                                    <xp:div id="innerRefresh" styleClass="scoHidden">
                                        <xc:cc_CommonFormField placeholder="Enter Other Reason...">
                                            <xp:this.facets>
                                                <xp:inputText
                                                    id="inputText3"
                                                    xp:key="field"
                                                    value="#{doc.prjOther}">
                                                </xp:inputText>
                                            </xp:this.facets>
                                        </xc:cc_CommonFormField>

Answer 1

There are 2 approaches to solve this: - server side rendering using SSJS - client side rendering using JS

When you opt for the former, you have to submit your data (partial including the hidden div) to recompute your rendered property.

Client side: you render the div in any case, but give it a class attribute that maps to CSS display:none. In your client side JS you add an onChange handler to the radio buttons and change the class to something visible (and back if others are unselected). This saves you from a server round trip.

Only caveat: (best handled in your Java) you need to dismiss an eventually entered value in the field for other if other wasn't selected.