jsf 2.0 f:ajax render ID not found

Question

When the Save button in the popup(pp1) clicked the projects list gets updated. But when press the update button in the projects list, the render ID :form1:pp1 is not there error comes when its being rendered. If do render="@all" it works, but its not good. ( error : <f:ajax> contains an unknown id ':form1:pp1')

<h:form id="form1" prependid=false>
<h:panelGroup id="projects">
<ui:repeat var="action" value="#{dadadada}" varStatus="status">
<h:commandButton value="Save">
//gives id not found error
<f:ajax event="click" execute="@form" render=":form1:pp1" listener="#{fsfsfsfsfs}" />
</h:commandButton>
</ui:repeat>

</h:panelGroup> // project panel group

//popup
<h:panelGroup id="pp1">
<div id="popup2" class="popup_block">

//save button in the popup
<div class="popupBody_save2">
            <h:commandButton  image="resources/images/saveBtn.gif" value="Save">
             <f:ajax event="click" execute="@form" render="projects" listener="#{dfsfssfs}" />
            </h:commandButton>
        </div>

</div>
</h:panelGroup>

</h:form>

Solution

The :form1:pp1 won't work since you have prependId="false" on the form. The pp1 won't work since it's then looking for the component in the same scope as <ui:repeat> which is by itself an UINamingContainer component.

Open the JSF page in webbrowser, rightclick and View Source to get the generated HTML. Locate the HTML element which is generated by <h:panelGroup id="pp1">. It should look something like this

<span id="foo:bar:pp1">

You need to use exactly this ID prefixed with : in the render attribute.

<f:ajax render=":foo:bar:pp1">

If there's an autogenerated ID part such as j_id0, then you need to give the parent component in question an fixed ID.

Comments

[Matt Handy]

Look in the generated html source and try to find out what's the real id of your panelGroup.

[Amilask]

as prependId= false, it displays as <span id="pp1"> which I should be able to access using render = ":pp1" isn't it? but id still can't find the element