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>
execute: Defines the id for which input data, Ajax will run. render: Defines the id where the output of Ajax is displayed. Now find the complete example for JSF 2 and Ajax integration. We are creating two UI, one for f:ajax with h:inputText demo and second for f:ajax with h:commandButton demo.
Attribute render contains a space-separated list of HTML identifiers of the elements that will be updated on the web page once the AJAX response is received. It also supports four special values as execute attribute but the default value is @none. Now, open up the Eclipse IDE and let’s start building the application! 2. JSF Ajax Render Example
It is possible to render components that live outside of the form where your AJAX tag lives; actually, it’s possible to render any component by using it’s fully-qualified component ID. Just prefix the target ID with the naming-container separator character, usually “:”, and provide the full name of the component as it is rendered on the HTML page.
This page will provide the JSF 2 and Ajax integration example with f:ajax tag. To use this tag we need to do nesting with h:inputText and h:commandButton etc. There are different attributes in f:ajax tag which is used to define Ajax execution.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With