f:ajax within ui:repeat, unknown id for the component

Question

When I try to render a panelGroup by an ajax call, it gives unknown id.

<h:form id="form1" prependId=false>
  <h:panelGroup id="panel1">
       <h:dataTable/>
       <ui:repeat value="#{bean.page}" var="page">
          <h:commandLink value="#{page}">
              <f:ajax execute="@form" render="panel1" listener="#{bean.page}" />
          </h:commandLink>
       </ui:repeat>
  </h:panelGroup>     
 </h:form>

When I tried this code, it gives unknown id panel1. I tried with id ":panel1" too. I get the same error.

The ui:repeat is inside the panelGroup. So, I had to move to the other end. — user679526, Aug 17 '11 at 14:00
Okay, I'll edit the code snippet in my answer as well. But the technical answer remains the same. — BalusC, Aug 17 '11 at 14:01

BalusC · Accepted Answer · 2011-08-17T15:43:50.943

21

A relative client ID (i.e. not starting with :) is relative to the current parent NamingContainer component. The <ui:repeat> is also a NamingContainer. So the render="panel1" is looking for the component within the context of <ui:repeat>. This isn't going to work. An absolute client ID (i.e. starting with :) is looking for the component within the context of view root. But you've it inside a <h:form> -which is in turn another NamingContainer component-, so the render=":panel" is also not going to work.

The following should work, with prependId="false" removed so that you can refer it:

<h:form id="form1">
  <h:panelGroup id="panel1">
    <h:dataTable/>

    <ui:repeat value="#{bean.page}" var="page">
      <h:commandLink value="#{page}">
        <f:ajax execute="@form" render=":form1:panel1" listener="#{bean.page}" />
      </h:commandLink>
    </ui:repeat>
  </h:panelGroup> 
</h:form>

By the way, if you actually want to render only the table, then you should be doing this:

<h:form id="form1">
  <h:panelGroup>
    <h:dataTable id="table1" />

    <ui:repeat value="#{bean.page}" var="page">
      <h:commandLink value="#{page}">
        <f:ajax execute="@form" render=":form1:table1" listener="#{bean.page}" />
      </h:commandLink>
    </ui:repeat>
  </h:panelGroup> 
</h:form>

Update: as per the comments, it turns out that you have changed the JSF default NamingContainer separator character from : to _ by configuration. In that case, you need to use _ instead of : in the client ID selector.

<f:ajax execute="@form" render="_form1_panel1" listener="#{bean.page}" />

edited Aug 17 '11 at 15:43

answered Aug 17 '11 at 12:33

BalusC

1,082,665
372
3,610
3,555

I removed prependId="false" for the form tag. I get the exception, javax.faces.FacesException: contains an unknown id ':form1:panel1' - cannot locate it in the context of the component j_idt228. – user679526 Aug 17 '11 at 14:28
Then the `` is by itself apparently located in another `NamingContainer` component. Rightclick the page in browser, do *View Source* and locate the `` and use exactly that ID with `:` prefixed. – BalusC Aug 17 '11 at 14:30
is located in . Is there a way to find out which naming container is it located in? – user679526 Aug 17 '11 at 15:18
Checking HTML source is really the easiest for starters who don't understand the `NamingContainer` concept. Do as I said in an earlier comment, do a *View Source* of the JSF-generated HTML source in the webbrowser and locate the `` element which JSF has generated for ``. You should use exactly that HTML ID (the client ID) prefixed with `:` in the `render` attribute. – BalusC Aug 17 '11 at 15:18
For the commandlink, I used FacesContext to get current instance and traced the parent component for form which is ViewRoot. – user679526 Aug 17 '11 at 15:22
Sigh. Look in the HTML source. What's the generated ID of the ``? – BalusC Aug 17 '11 at 15:24
The panelGroup id is – user679526 Aug 17 '11 at 15:28
OK, you've apparently changed your JSF configuration to use `_` as naming container separator character. This way you need to use `render="_form_panel1"` instead. – BalusC Aug 17 '11 at 15:34
I used render="_form_panel1". It is working now. Thanks a lot for your help and time. – user679526 Aug 17 '11 at 15:36
1

You're welcome. If the reason of changing the default separator character from `:` to `_` was to overcome CSS selector issues, then you may find this answer useful which shows the alternative ways: http://stackoverflow.com/questions/5878692/how-to-use-jsf-generated-html-element-id-in-css-selectors – BalusC Aug 17 '11 at 15:40
Thank you for that answer. Finally I fully understand the case – Mateusz Gaweł Dec 06 '13 at 12:01
Is there a way that doesn't remove prependId="false"? My form has prependId=false and the render=":thePanelGroupIdThatWrapsUIRepeat" but it still refreshes the page. – emeraldhieu Mar 13 '15 at 09:03
@Emerald214: just never use `prependId`. It's an unthoughtful leftover of JSF 1.2. – BalusC Mar 13 '15 at 10:39

score 0 · Answer 2 · edited Jan 06 '16 at 10:14

<ui:repeat value="#{interaction.interactionListBean}" var="interactionItr"> 

    <h:commandLink value="#{interactionItr.interactionDate}"  styleClass="#{interaction.createImage}" style="margin:0 5px 5px 0!important; display:inline-block;"><br/>
        <f:ajax  render=":formId:interactionDate :formId:category :formId:activity :formId:status :formId:channel :formId:status1 :formId:caseId :formId:comment :formId:user1 :formId:team :formId:user :formId:transit "  
                    listener="#{interactionController.interactionDetailGet}"/> 
        <f:param name="RefId" value="#{interaction.interactionRefId}"/> 
    </h:commandLink>

</ui:repeat>

problem : please refer above with above code their is no exception on console but the ajax listerner will not invoke when I saw this post similiar kind of concept being use just I was place the exceute="@form" then my coding is working fine

solution:

execute="@form"

f:ajax within ui:repeat, unknown id for the component

2 Answers2

Linked