how to show hide datatables, by selecting values from drop down menu in jsf2.0 and primefaces 2.2

Question

I am having a drop down menu, on selecting a particular value from a drop down menu, i have to show a datatable corresponding to it and on selecting second from drop down menu ,value the previous data table should hide and the datatable corresponding to second value should populate and so on here are my codes:

   <h:selectOneMenu value="#{bean.value}"
styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
style="width:100px;">
<f:selectItem itemLabel="Select" itemValue="Select" />
<f:selectItem itemLabel="5" itemValue="5" id="mySelectedValue1" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="6" itemValue="6" id="mySelectedValue2" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="7" itemValue="7" id="mySelectedValue3" onclick="hideOrShow(??);"/>    
    </h:selectOneMenu> 


<script type="text/javascript">   
function hideOrShow(show) {
var obj = document.getElementById("myForm:myPanel");
     if (show) { 
        obj.style.display = "block";
     }
 else {
         obj.style.display = "none"; 
    } 
  } </script> 


<h:panelGrid id="myPanel" columns="2"> 
    ... 
</h:panelGrid> 

My Question is what to put as parameters in HideOrShow() shown as ?? so that java script function will identify it. And how initially all the datatables will be hidden?

thanks: curious

Answer 1

Using plain JS in combination with JSF is often recipe for trouble and unintuitiveness because of the way how JSF state management works. You should prefer solving the problem using pure JSF. It will also often end up in a simpler view. You can use the JSF-provided <f:ajax> for this particular purpose in combination with the rendered attribute on the components to show/hide.

Kickoff example:

<h:form>
    <h:selectOneMenu value="#{bean.value}">
        <f:selectItem itemLabel="Select" itemValue="#{null}" />
        <f:selectItem itemLabel="5" itemValue="5" />
        <f:selectItem itemLabel="6" itemValue="6" />
        <f:selectItem itemLabel="7" itemValue="7" />
        <f:ajax render="tables" />
    </h:selectOneMenu> 

    <h:panelGroup id="tables">
        <h:dataTable value="#{bean.list5}" rendered="#{bean.value == 5}">
            ...
        </h:dataTable>
        <h:dataTable value="#{bean.list6}" rendered="#{bean.value == 6}">
            ...
        </h:dataTable>
        <h:dataTable value="#{bean.list7}" rendered="#{bean.value == 7}">
            ...
        </h:dataTable>
    </h:panelGroup>
</h:form>

Make sure that the bean is in the view scope whenever the tables contain by itself input components.