Get id of parent naming container in template for in render / update attribute

Question

I have a template and in its Definition I use several forms and buttons.

The problem is the definition (define) xhtml file does not know the component hierarchy.

And for example I want to update the element "table2" in a different form in the same define file.

Template Insert:

<p:tabView id="nav"> <!-- nav -->
    <ui:insert name="content_nav">content navigation</ui:insert>
</p:tabView>

defines the first level of my hierarchy "nav"

Template define:

<ui:define name="content_nav">
    <h:form id="form1"> <!-- nav:form1 -->
        <h:dataTable id="table1"/> <!-- nav:form1:table1 -->
        <p:inputText value="#{bean.value}"/>
        <p:commandButton action="..." update="nav:form2:table2"/>
    </h:form>
    <h:form id="form2">
        <h:dataTable id="table2"/> <!-- nav:form2:table2 -->
        <!-- other elements -->
    </h:form>
</ui:define>

In my define part I don't want to know "nav"!

How can I do this? or how can I move one naming component upwards?, or save the highest parent complete id in a variable?

sometimes i saw something like:

update=":table2"

But I could not find any informations about this?, the JavaEE 6 documentation just mentions the @ keywords.

Answer 1

Ugly, but this should work out for you:

<p:commandButton action="..." update=":#{component.namingContainer.parent.namingContainer.clientId}:form2:table2" />

As you're already using PrimeFaces, an alternative is to use #{p:component(componentId)} , this helper function scans the entire view root for a component with the given ID and then returns its client ID:

<p:commandButton action="..." update=":#{p:component('table2')}" />

Answer 2

ugly answer works well

update=":#{component.namingContainer.parent.namingContainer.clientId}:form2:table2

mainly more useful updating from opened dialog to parent datatable

Answer 3

Additionally to the solutions above I had the problem, that I had to dynamically generate the to-be-updated components (many) based on server-side logic (with maybe harder to find out nesting).

So the solution on the server-side is an equivalent to update=":#{p:component('table2')}" ¹ which uses org.primefaces.util.ComponentUtils.findComponentClientId( String designId ) :

// UiPnlSubId is an enum containing all the ids used within the webapp xhtml.
// It could easily be substituted by a string list or similar.
public static String getCompListSpaced( List< UiPnlSubId > compIds ) {

    if ( compIds == null || compIds.isEmpty() )
        return "" ;
    StringBuffer sb = new StringBuffer( ":" ) ;
    for ( UiPnlSubId cid : compIds )
        sb.append( ComponentUtils.findComponentClientId( cid.name() ) ).append( " " ) ;
    return sb.deleteCharAt( sb.length() - 1 ).toString() ;  // delete suffixed space
}

called via some other method using it, eg like ... update="#{foo.getCompListComputed( 'triggeringCompId' )}" .

¹ : first I tried without too much thinking to return public static String getCompListSpaced0() { return ":#{p:component('table2')}" ; } public static String getCompListSpaced0() { return ":#{p:component('table2')}" ; } in an ... update="#{foo.getCompListSpaced0()} expression, which of course (after thinking about how the framework works :) ) is not resolved (returned as is) and may cause the issues with it some users experienced. Also my Eclipse / JBoss Tools environment suggested to write :#{p.component('table2')} ("." instead of ":") which did not help - of course.

Answer 4

You may use binding attribute to declare EL variable bound to JSF component. Then you may access absolute client id of this component by using javax.faces.component.UIComponent.getClientId() . See example below:

<t:selectOneRadio 
   id="yourId"
   layout="spread"
   value="#{yourBean.value}"
   binding="#{yourIdComponent}">
       <f:selectItems value="#{someBean.values}" />
</t:selectOneRadio>
<h:outputText>
   <t:radio for=":#{yourIdComponent.clientId}" index="0" />
</h:outputText>

Answer 5

Try this:

<h:commandButton value="Click me">
    <f:ajax event="click" render="table" />
</h:commandButton>