CODEWITHSUNDEEP
ajaxjsfdom
tarka
tarka

Reputation: 5587

Referencing JSF Component in DOM

What is the best way to make a component permanently available in the DOM? I currently have the following:

<h:form id="navigationForm">
           <pou:menu id="navigationMenu">  
                    <pou:submenu label="#{web['NavigationMenuLabel']}">  

                        <pou:menuitem value="#{web['NavigationMenuDashboard']}"
                                      action="#{accountData.viewAccountDashboard()}"
                                      update=":accountForm:accounts"/>

                        <pou:menuitem value="#{web['NavigationMenuRoleOneAccounts']}"
                                      action="#{accountData.viewRoleOneAccounts()}"
                                      update=":accountForm:accounts"/>

                    </pou:submenu>   
          </pou:menu> 
</h:form>

<h:form id="accountForm" rendered="#{accountData.renderTables()}">  

                #{accountData.populateDataTable()}

                <pou:dataTable id="accounts" 
                               var="account"
                               paginator="true" 
                               rows="10"
                               emptyMessage="#{web['NoAccountsData']}"
                               selection="#{accountData.selectedAccounts}"
                               rowKey="#{account.uuid}"
                               value="#{accountData.accountDataModel}"> 
...

The problem is... not surprisingly that the accountForm isn't always present (that is the point) so it doesn't update.

Upvotes: 0

Views: 95

Answers (1)

tarka
tarka

Reputation: 5587

I have no idea why I didn't think of this before! All you need to do is wrap the UI components that is permanently present. I used a <h:panelGroup> but I guess you could use what ever suits your situation. So in my situation:

<h:form id="navigationForm">
       <pou:menu id="navigationMenu">  
                <pou:submenu label="#{web['NavigationMenuLabel']}">  

                    <pou:menuitem value="#{web['NavigationMenuDashboard']}"
                                  action="#{accountData.viewAccountDashboard()}"
                                  update=":example"/>

                    <pou:menuitem value="#{web['NavigationMenuRoleOneAccounts']}"
                                  action="#{accountData.viewRoleOneAccounts()}"
                                  update=":example"/>

                </pou:submenu>   
      </pou:menu> 
</h:form>

<h:panelGroup id="example" layout="block">
    <h:form rendered="#{accountData.renderTables()}">  

            #{accountData.populateDataTable()}

            <pou:dataTable id="accounts" 
                           var="account"
                           paginator="true" 
                           rows="10"
                           emptyMessage="#{web['NoAccountsData']}"
                           selection="#{accountData.selectedAccounts}"
                           rowKey="#{account.uuid}"
                           value="#{accountData.accountDataModel}"> 
    ...
</h:panelGroup>

Upvotes: 1

Related Questions