xpages hiding/showing fields based on a combobox value

Question

I'm using a <xe:djTabContainer> with 10 <xe:djTabPane> containing numerous fields components.

There is a principal combobox whose value will determine which fields to be showed or not and in this way the document structure will be achieved.

If I will use this approach, then for all my >50 fields which I want to show/hide, I will use only the onChange event of the combobox?

Considering the fact that there are >50 fields which enter in this category < showing&hiding them >, should I use another approach / method? Thanks for your time.

<xp:comboBox value="#{Contr.txt_tipcontractcv}" id="comboBox4">                                 <xp:selectItems id="selectItems1">                                      
     <xp:this.value><![CDATA[#{javascript:return ""}]]></xp:this.value>
</xp:selectItems>
<xp:selectItems id="selectItems2">
    <xp:this.value><![CDATA[#{javascript:@DbColumn(@DbName(),"SetupvwTipuriContracteC",1);}]]>           </xp:this.value>
</xp:selectItems>                   
<xp:eventHandler event="onchange" submit="false">                                       <xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:FisaP}", {
});
]]></xp:this.script>                                    </xp:eventHandler>                          </xp:comboBox>

and the panel:

<xp:panel id="FisaP">
        <xp:label id="label4"
            style="color:rgb(128,0,0);font-family:verdana;font-size:9pt;font-weight:bold">
            <xp:this.value><![CDATA[#{javascript:"Fisa contract "+ Contr.getItemValueString("txt_tipcontractcv")}]]></xp:this.value>
            <xp:this.rendered><![CDATA[#{javascript:
            Contr.getItemValueString("txt_tipcontractcv") != ""
         }]]></xp:this.rendered>

        </xp:label>

    </xp:panel>

Answer 1

I would turn it around. Let the labels and fields ask the combobox if they should be rendered or not. Let the combobox's onchange event initiate a partial refresh of a panel which includes all fields you want to show/hide.

If your >50 fields are all on one place you can frame them with a panel and set the rendered property there.

If your combobox is bound to a viewScope variable the rendered property of fields/labels would be

rendered="#{javascript:viewScope.tipcontractcv1 == 'Vanzare-Cumparare'}"

or if it is bound to a document field then

rendered="#{javascript:document1.getItemValueString('txt_tipcontractcv1') === 'Vanzare-Cumparare'}"

Update:

Based on your code in your answer https://stackoverflow.com/a/25636661/2065611 take the following steps so get it to work with the Dojo Tab Container:

1.

Put the labels and fields in panels which do have an id but don't have a rendered attribute

<xp:panel id="panel1">
    <xp:label value="Persoane spre informare" ... id="label2">   
         <xp:this.rendered><![CDATA[#{javascript:
            Contr.getItemValueString("txt_tipcontractcv1") == "Vanzare-Cumparare"
         }]]></xp:this.rendered>
    </xp:label>
    ... other label and fields ...
</xp:panel>

You can create other panels "panel2", "panel3", ... too. They can be placed in different djTabPanes.

2.

Change the onchange event of your combobox and execute client side code to refresh the panels

            <xp:eventHandler
                event="onchange"
                submit="false">
                <xp:this.script><![CDATA[
                    XSP.partialRefreshPost("#{id:panel1}", {
                        onComplete: function() {
                            XSP.partialRefreshPost("#{id:panel2}");
                        }
                    });
                ]]></xp:this.script>
            </xp:eventHandler>

3.

You can optimize your code if you put labels and fields with the same rendered attribute together into an additional panel

<xp:panel id="panel1">
    <xp:panel id="panelRendered1"
         <xp:this.rendered><![CDATA[#{javascript:
            Contr.getItemValueString("txt_tipcontractcv1") == "Vanzare-Cumparare"
         }]]></xp:this.rendered>
        <xp:label value="Persoane spre informare" ... id="label2" />   
        ... other label and fields ...
    </xp:panel>
</xp:panel>