CODEWITHSUNDEEP
jsfrichfaces
Kshitij Jain
Kshitij Jain

Reputation: 1793

How to load a4j:outputPanel from DropDown(<h:selectOneMenu>) using ajax call in Richfaces?

This is related to richfaces 4.0

I have two dropdown in my webpage. On selecting item on first DropDown, Second DropDown(Invisible previously) is easily rendered on webpage .

On selecting the item in second drop down, I want to render a separate panel(Not able to do this).

Problem is that I can render second DropDown on webpage successfully after selecting item from first dropdown, but no panel is rendered when I am selecting second dropDown item .

My code is as follows :

 <rich:panel header="Select Operation" style="margin-top: 20px;  height: 110px">
            <h:panelGrid columns="1">
                <h:form>
                    <h:panelGrid columns="4">
                        <h:outputLabel value="Operation: " style="font-size: small; font-weight: 900"/>
                        <h:selectOneMenu style="margin-left: 10px; width: 150px" value="#{adminBean.currentType}">                                
                            <f:selectItem itemValue="0" itemLabel="" />
                            <f:selectItem itemValue="1" itemLabel="Add New User" />
                            <f:selectItem itemValue="2" itemLabel="Manage Balance" />
                            <f:selectItem itemValue="3" itemLabel="Manage Account" />
                            <a4j:ajax event="valueChange" render="second" execute="@this" />                                
                        </h:selectOneMenu>

                        <h:form>
                            <a4j:outputPanel id="second" layout="block">
                                <h:outputLabel value="Type : " style="margin-left: 130px; font-size: small; font-weight: bold;" rendered="#{not empty adminBean.currentType}"/>
                                <h:selectOneMenu style="margin-left: 10px; width: 150px" value="#{adminBean.currentItem}" rendered="#{not empty adminBean.currentType}">
                                    <f:selectItem itemValue="0" itemLabel="" />
                                    <f:selectItem itemValue="1" itemLabel="Participant" />
                                    <f:selectItem itemValue="2" itemLabel="Administrator" />
                                    <a4j:ajax event="valueChange"  render="rep"  execute="@this" />   
                                </h:selectOneMenu>

                            </a4j:outputPanel>                            
                        </h:form>
                    </h:panelGrid>
                </h:form>

            </h:panelGrid>

        </rich:panel>                

        <rich:panel style="margin-top: 20px; min-height: 500px">

            <a4j:outputPanel id="rep">

                <rich:panel rendered="#{not empty adminBean.currentItem}" header="Add Customer">

                    <h:panelGrid columns="2">
                        <a4j:commandButton value="Add New" style="width: 70px"></a4j:commandButton>
                        <a4j:commandButton value="Delete" style="margin-left: 10px; width: 70px"></a4j:commandButton>
                    </h:panelGrid>

                    </rich:panel>
                   </a4j:outputPanel>
            </rich:panel>

As explained above I want id="rep" to be rendered when selecting item from second .

Upvotes: 0

Views: 1772

Answers (1)

Luiggi Mendoza
Luiggi Mendoza

Reputation: 85779

You have two problems:

  • You have nested forms which result in invalid HTML.
  • You should give ID's to your components.

This should be the code fixed (note that I removed all the unnecessary attributes in order to make the page work as styles):

<rich:panel id="pnlContainer">
    <h:panelGrid columns="1" id="grdSingleCol">
        <h:form id="frmData">
            <h:panelGrid columns="4" id="grdData">
                <h:selectOneMenu value="#{adminBean.currentType}">
                    <f:selectItem itemValue="0" itemLabel="" />
                    <f:selectItem itemValue="1" itemLabel="Add New User" />
                    <f:selectItem itemValue="2" itemLabel="Manage Balance" />
                    <f:selectItem itemValue="3" itemLabel="Manage Account" />
                    <a4j:ajax render="second" execute="@this" />
                </h:selectOneMenu>

                <a4j:outputPanel id="second" layout="block">
                    <h:selectOneMenu value="#{adminBean.currentItem}">
                        <f:selectItem itemValue="0" itemLabel="" />
                        <f:selectItem itemValue="1" itemLabel="Participant" />
                        <f:selectItem itemValue="2" itemLabel="Administrator" />
                        <!-- check how to render components outside the form -->
                        <a4j:ajax render=":pnlRepContainer:rep" execute="@this" />
                    </h:selectOneMenu>
                </a4j:outputPanel>
            </h:panelGrid>
        </h:form>
    </h:panelGrid>
</rich:panel>

<rich:panel id="pnlRepContainer">
    <a4j:outputPanel id="rep">
        <rich:panel rendered="#{not empty adminBean.currentItem}"
            header="Add Customer">
            <h:panelGrid columns="2">
                <a4j:commandButton value="Add New" />
                <a4j:commandButton value="Delete" />
            </h:panelGrid>
        </rich:panel>
    </a4j:outputPanel>
</rich:panel>

Upvotes: 1

Related Questions