How to find out client ID of component for ajax update render Cannot find component with expression foo referenced from bar

Question

The following code is inspired from PrimeFaces DataGrid + DataTable Tutorials and put into a <p:tab> of a <p:tabView> residing in a <p:layoutUnit> of a <p:layout>. Here is the inner part of the code (starting from p:tab component); the outer part is trivial.

<p:tabView id="tabs">
    <p:tab id="search" title="Search">                        
        <h:form id="insTable">
            <p:dataTable id="table" var="lndInstrument" value="#{instrumentBean.instruments}">
                <p:column>
                    <p:commandLink id="select" update="insTable:display" oncomplete="dlg.show()">
                        <f:setPropertyActionListener value="#{lndInstrument}" 
                                        target="#{instrumentBean.selectedInstrument}" />
                        <h:outputText value="#{lndInstrument.name}" />
                    </p:commandLink>                                    
                </p:column>
            </p:dataTable>
            <p:dialog id="dlg" modal="true" widgetVar="dlg">
                <h:panelGrid id="display">
                    <h:outputText value="Name:" />
                    <h:outputText value="#{instrumentBean.selectedInstrument.name}" />
                </h:panelGrid>
            </p:dialog>                            
        </h:form>
    </p:tab>
</p:tabView>

When I click the <p:commandLink>, the code stops working and gives the message:

Cannot find component with expression "insTable:display" referenced from "tabs:insTable:select".

When I try the same using <f:ajax>, then it fails with a different message basically telling the same:

<f:ajax> contains an unknown id "insTable:display" cannot locate it in the context of the component "tabs:insTable:select"

When it happens during another Ajax postback and the JSF project stage is set to Development, then it fails with a JavaScript alert with the message:

malformedXML: During update: insTable:display not found

How is this caused and how can I solve it?

This question is related to ajax jsf jsf-2 primefaces clientid

User · Answer

first of all  as far as i know placing dialog inside a tabview is a bad practice    you better take it out     and now to your question   sorry  took me some time to get what exactly you wanted to implement   did at my web app myself just now  and it works  as I sayed before place the p dialog out side the  p tabView     leave the p dialog as you initially suggested      lt p dialog modal  true  widgetVar  dlg  gt       lt h panelGrid id  display  gt           lt h outputText value  Name     gt           lt h outputText value    instrumentBean selectedInstrument name     gt       lt  h panelGrid gt   lt  p dialog gt       and the p commandlink should look like this  all i did is to change the update attribute    lt p commandLink update  display  oncomplete  dlg show    gt       lt f setPropertyActionListener value    lndInstrument            target    instrumentBean selectedInstrument     gt       lt h outputText value    lndInstrument name     gt   lt  p commandLink gt      the same works in my web app  and if it does not work for you   then i guess there is something wrong in your java bean code

User · Answer

It s because the tab is a naming container aswell    your update should be update  Search insTable display  What you can do aswell is just place your dialog outside the form and still inside the tab then it would be  update  Search display

User · Answer

I know this already has a great answer by BalusC but here is a little trick I use to get the container to tell me the correct clientId.

Remove the update on your component that is not working
Put a temporary component with a bogus update within the component you were trying to update
hit the page, the servlet exception error will tell you the correct client Id you need to reference.
Remove bogus component and put correct clientId in the original update

Here is code example as my words may not describe it best.

<p:tabView id="tabs">
    <p:tab id="search" title="Search">                        
        <h:form id="insTable">
            <p:dataTable id="table" var="lndInstrument" value="#{instrumentBean.instruments}">
                <p:column>
                    <p:commandLink id="select"

Remove the failing update within this component

 oncomplete="dlg.show()">
                        <f:setPropertyActionListener value="#{lndInstrument}" 
                                        target="#{instrumentBean.selectedInstrument}" />
                        <h:outputText value="#{lndInstrument.name}" />
                    </p:commandLink>                                    
                </p:column>
            </p:dataTable>
            <p:dialog id="dlg" modal="true" widgetVar="dlg">
                <h:panelGrid id="display">

Add a component within the component of the id you are trying to update using an update that will fail

   <p:commandButton id="BogusButton" update="BogusUpdate"></p:commandButton>

                    <h:outputText value="Name:" />
                    <h:outputText value="#{instrumentBean.selectedInstrument.name}" />
                </h:panelGrid>
            </p:dialog>                            
        </h:form>
    </p:tab>
</p:tabView>

Hit this page and view the error. The error is: javax.servlet.ServletException: Cannot find component for expression "BogusUpdate" referenced from tabs:insTable: BogusButton

So the correct clientId to use would then be the bold plus the id of the target container (display in this case)

tabs:insTable:display

User · Answer

Try change update  insTable display  to update  display   I believe you cannot prefix the id with the form ID like that

User · Answer

Look in HTML output for actual client ID  You need to look in the generated HTML output to find out the right client ID  Open the page in browser  do a rightclick and View Source  Locate the HTML representation of the JSF component of interest and take its id as client ID  You can use it in an absolute or relative way depending on the current naming container  See following chapter   Note  if it happens to contain iteration index like  0    1   etc  because it s inside an iterating component   then you need to realize that updating a specific iteration round is not always supported  See bottom of answer for more detail on that   Memorize NamingContainer components and always give them a fixed ID  If a component which you d like to reference by ajax process execute update render is inside the same NamingContainer parent  then just reference its own ID    lt h form id  form  gt       lt p commandLink update  result  gt   lt  -- OK  -- gt       lt h panelGroup id  result    gt   lt  h form gt    If it s not inside the same NamingContainer  then you need to reference it using an absolute client ID  An absolute client ID starts with the NamingContainer separator character  which is by default      lt h form id  form  gt       lt p commandLink update  result  gt   lt  -- FAIL  -- gt   lt  h form gt   lt h panelGroup id  result    gt       lt h form id  form  gt       lt p commandLink update   result  gt   lt  -- OK  -- gt   lt  h form gt   lt h panelGroup id  result    gt       lt h form id  form  gt       lt p commandLink update   result  gt   lt  -- FAIL  -- gt   lt  h form gt   lt h form id  otherform  gt       lt h panelGroup id  result    gt   lt  h form gt       lt h form id  form  gt       lt p commandLink update   otherform result  gt   lt  -- OK  -- gt   lt  h form gt   lt h form id  otherform  gt       lt h panelGroup id  result    gt   lt  h form gt    NamingContainer components are for example  lt h form gt    lt h dataTable gt    lt p tabView gt    lt cc implementation gt   thus  all composite components   etc  You recognize them easily by looking at the generated HTML output  their ID will be prepended to the generated client ID of all child components  Note that when they don t have a fixed ID  then JSF will use an autogenerated ID in j idXXX format  You should absolutely avoid that by giving them a fixed ID  The OmniFaces NoAutoGeneratedIdViewHandler may be helpful in this during development   If you know to find the javadoc of the UIComponent in question  then you can also just check in there whether it implements the NamingContainer interface or not  For example  the HtmlForm  the UIComponent behind  lt h form gt  tag  shows it implements NamingContainer  but the HtmlPanelGroup  the UIComponent behind  lt h panelGroup gt  tag  does not show it  so it does not implement NamingContainer  Here is the javadoc of all standard components and here is the javadoc of PrimeFaces   Solving your problem  So in your case of    lt p tabView id  tabs  gt  lt  -- This is a NamingContainer -- gt       lt p tab id  search  gt  lt  -- This is NOT a NamingContainer -- gt           lt h form id  insTable  gt  lt  -- This is a NamingContainer -- gt               lt p dialog id  dlg  gt  lt  -- This is NOT a NamingContainer -- gt                   lt h panelGrid id  display  gt    The generated HTML output of  lt h panelGrid id  display  gt  looks like this    lt table id  tabs insTable display  gt    You need to take exactly that id as client ID and then prefix with   for usage in update    lt p commandLink update   tabs insTable display  gt    Referencing outside include tagfile composite  If this command link is inside an include tagfile  and the target is outside it  and thus you don t necessarily know the ID of the naming container parent of the current naming container  then you can dynamically reference it via UIComponent getNamingContainer   like so    lt p commandLink update     component namingContainer parent namingContainer clientId  display  gt    Or  if this command link is inside a composite component and the target is outside it    lt p commandLink update     cc parent namingContainer clientId  display  gt    Or  if both the command link and target are inside same composite component    lt p commandLink update     cc clientId  display  gt    See also Get id of parent naming container in template for in render   update attribute  How does it work under the covers  This all is specified as  search expression  in the UIComponent findComponent   javadoc      A search expression consists of either an identifier  which is matched exactly against the id property of a UIComponent  or a series of such identifiers linked by the UINamingContainer getSeparatorChar character value  The search algorithm should operates as follows  though alternate alogrithms may be used as long as the end result is the same          Identify the UIComponent that will be the base for searching  by stopping as soon as one of the following conditions is met          If the search expression begins with the the separator character  called an  absolute  search expression   the base will be the root UIComponent of the component tree  The leading separator character will be stripped off  and the remainder of the search expression will be treated as a  relative  search expression as described below    Otherwise  if this UIComponent is a NamingContainer it will serve as the basis    Otherwise  search up the parents of this component  If a NamingContainer is encountered  it will be the base    Otherwise  if no NamingContainer is encountered  the root UIComponent will be the base       The search expression  possibly modified in the previous step  is now a  relative  search expression that will be used to locate the component  if any  that has an id that matches  within the scope of the base component  The match is performed as follows          If the search expression is a simple identifier  this value is compared to the id property  and then recursively through the facets and children of the base UIComponent  except that if a descendant NamingContainer is found  its own facets and children are not searched     If the search expression includes more than one identifier separated by the separator character  the first identifier is used to locate a NamingContainer by the rules in the previous bullet point  Then  the findComponent   method of this NamingContainer will be called  passing the remainder of the search expression          Note that PrimeFaces also adheres the JSF spec  but RichFaces uses  some additional exceptions         reRender  uses UIComponent findComponent   algorithm  with some additional exceptions  to find the component in the component tree    Those additional exceptions are nowhere in detail described  but it s known that relative component IDs  i e  those not starting with    are not only searched in the context of the closest parent NamingContainer  but also in all other NamingContainer components in the same view  which is a relatively expensive job by the way    Never use prependId  false   If this all still doesn t work  then verify if you aren t using  lt h form prependId  false  gt   This will fail during processing the ajax submit and render  See also this related question  UIForm with prependId  quot false quot  breaks  lt f ajax render gt    Referencing specific iteration round of iterating components  It was for long time not possible to reference a specific iterated item in iterating components like  lt ui repeat gt  and  lt h dataTable gt  like so    lt h form id  form  gt       lt ui repeat id  list  value      one   two   three     var  item  gt           lt h outputText id  item  value    item     gt  lt br  gt       lt  ui repeat gt        lt h commandButton value  Update second item  gt           lt f ajax render   form list 1 item    gt       lt  h commandButton gt   lt  h form gt    However  since Mojarra 2 2 5 the  lt f ajax gt  started to support it  it simply stopped validating it  thus you would never face the in the question mentioned exception anymore  another enhancement fix is planned for that later     This only doesn t work yet in current MyFaces 2 2 7 and PrimeFaces 5 2 versions  The support might come in the future versions  In the meanwhile  your best bet is to update the iterating component itself  or a parent in case it doesn t render HTML  like  lt ui repeat gt    When using PrimeFaces  consider Search Expressions or Selectors  PrimeFaces Search Expressions allows you to reference components via JSF component tree search expressions  JSF has several builtin     this  current component  form  parent UIForm  all  entire document  none  nothing   PrimeFaces has enhanced this with new keywords and composite expression support     parent  parent component  namingcontainer  parent UINamingContainer  widgetVar name   component as identified by given widgetVar   You can also mix those keywords in composite expressions such as  form  parent   this  parent  parent  etc   PrimeFaces Selectors  PFS  as in    someclass  allows you to reference components via jQuery CSS selector syntax  E g  referencing components having all a common style class in the HTML output  This is particularly helpful in case you need to reference  a lot of  components  This only prerequires that the target components have all a client ID in the HTML output  fixed or autogenerated  doesn t matter   See also How do PrimeFaces Selectors as in update  quot    myClass  quot  work

[ajax] How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

The answer is

Examples related to ajax

Examples related to jsf

Examples related to jsf-2

Examples related to primefaces

Examples related to clientid

Tags