Question

I have a Primefaces dataTable with rowEdit. Two columns contain a selectOneMenu control in each. First selectOneMenu has values SINGLE, MULTIPLE. If it is SINGLE, second column should contain selectOneMenu and if it is MULTIPLE, second column should contain pickList.
Initially second column is shown with selectOneMenu or pickList as per the value in value in first selectOneMenu that is set in the bean. But when user changes value in first selectOneMenu, I want either second selectOneMenu or pickList visible in second Column. This I tried using JQuery but not successful. Below is the code ……

<p:cellEditor>
<f:facet name="output">
     <h:outputLabel value="#{bean.INPUTTYPE}" />
    </f:facet>

<f:facet name="input">
        <p:selectOneMenu id="inputType" value="#{bean.InputType}" >
        <f:selectItems value="#{beanDetails.inputTypes}"></f:selectItems>
            <p:ajax event="change" oncomplete="inputTypeChanged(#{rowIndex})"/> 
        </p:selectOneMenu>
    </f:facet>
</p:cellEditor> 
</p:column>


<p:column>
    <f:facet name="header">
            <h:outputLabel value="Default Value" />
     </f:facet>

     <p:cellEditor>
    <f:facet name="output">
        <h:outputLabel value="#{bean.DEFAULTVALUE}"/>
    </f:facet>

    <f:facet name="input">
        <p:selectOneMenu id="distinctVals" value="#{bean.DEFAULTVALUE}" rendered="#{bean.fldType == 1}" >
            <f:selectItems value="#{bean.DISTINCT_VALUES}"/>
        </p:selectOneMenu>

        <p:pickList value="#{bean.PICK_VALUES}" id="pickVals" var="pickVals" itemLabel="#{pickVals}" itemValue="#{pickVals}" rendered="#{bean.fldType == 2}"/>
    </f:facet>   
</p:cellEditor> 
</p:column>


<script type="text/javascript">
    function inputTypeChanged(ind){
        var str = 'table_Details:' + ind + ':inputType_input';
        var selected = $(document.getElementById(str));

        if(selected.val() == 'SINGLE'){
            str = 'table_Details:' + ind + ':distinctVals_input';
                selected = $(document.getElementById(str));
                $(selected).show();

                str = 'table_Details:' + ind + ':pickVals_input';
                selected = $(document.getElementById(str));
                $(selected).fadeOut();
        }else if(selected.val() == 'MULTIPLE'){
                str = 'table_Details:' + ind + ':distinctVals_input';
                selected = $(document.getElementById(str));
                $(selected).fadeOut();

                str = 'table_Details:' + ind + ':pickVals_input';
                selected = $(document.getElementById(str));
                $(selected).fadeIn();

        }
    }
</script>

I am using primefaces-3.1.RC1. Anything wrong with my code ?

Answer 1

Inter dependent validations are handled in RowEditEvent