xpages hiding/showing fields based on a combobox value

Question

I\'m using a with 10 containing numerous fields components.

There is a principal combobox wh

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>

Answer 2

First... never do this:

if (comboVal == "Vanzare-Cumparare") 

Even though it's called "SSJS".. it's really not "JavaScript"... you're pretty much working with Java. In Java everything is an object. Even a literal string. So by entering "Vanzare-Cumparare" you're pretty much creating a new Object. You can see this in the typeahead of the SSJS editor. Try typing "anything". <-- Note you NEED to type in that period.

The way to do that if statement is:

if ("Vanzare-Cumparare".equalsIgnoreCase(comboVal)

you could reverse it I think:

if (comboVal.equalsIgnoreCase("Vanzare-Cumparare")

Should give you the same result. I think sometimes you can get away with using the == but mostly likely it's going to bite you at some point no matter what. So I recommend never doing that.

I'm not sure I'm following your approach here. I guess it makes some sense but if it were me I'd do it differently. I know that personally I've NEVER tried to grab the component in SSJS like this: var combo:javax.faces.component.UIComponent - I've never seen the need. I'd prefer to use a scoped variable and then in the label's rendering property grab that scoped variable and use that to determine your rendering value - true or false.

Answer 3

I see a real problem. If the component is not currently rendered, you cannot get a handle to it with getComponent. If you simply change the display value, then the component is always there, even if it's not displayed.

Something like this:

var combo:javax.faces.component.UIComponent = getComponent("txt_tipcontractcv1");
var comboVal = combo.getValue(); 
if (comboVal.equalsIgnoreCase("Vanzare-Cumparare")) {
    document.getElementById("#{id:label2}").style.display = "block"; // or "inline"
} else {
    document.getElementById("#{id:label2}").style.display = "none";
}

You need to ensure that the label2 element is always rendered, so that the style indicates whether it is visible.