I'm have something like this
<ui:repeat value="#{val}" id="repeatID" var="var">
<h:panelGroup layout="block" id="blockForRender">
<f:ajax execute="#this" render=":#{cc.clientId}:blockForRender"> text </f:ajax>
</h:panelGroup>
</ui:repeat>
And this is make error - "cannot locate it in the context of the component".
Why? And how I can do this?
No this not work. Maybe because ajax is in the other composite?
<ui:repeat value="#{val}" id="repeatID" var="var">
<composite:otherComposite id="otherComposite">
<h:panelGroup layout="block" id="blockForRender">
<f:ajax execute="#this" render=":#{cc.clientId}:blockForRender"> text </f:ajax>
</h:panelGroup>
</composite:otherComposite>
</ui:repeat>
Because the component with that ID doesn't exist at all. It's instead prefixed with the iteration index of the <ui:repeat> like so ccClientId:0:blockForRender. Open the page in browser and do View Source to see it yourself.
Just omit the absolute ID prefix to make it relative to the closest parent UINamingContainer (which is the <ui:repeat> itself in your particular —heavily oversimplified— snippet).
<f:ajax ... render="blockForRender">
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Related
I'm trying to ajax-update a conditionally rendered component.
<h:form>
...
<h:commandButton value="Login" action="#{login.submit}">
<f:ajax execute="#form" render=":text" />
</h:commandButton>
</h:form>
<h:outputText id="text" value="You're logged in!" rendered="#{not empty user}" />
However, that does not work. I can assure that #{user} is actually available. How is this caused and how can I solve it?
It's not possible to re-render (update) a component by ajax if the component itself is not rendered in first place. The component must be always rendered before ajax can re-render it. Ajax is using JavaScript document.getElementById() to find the component which needs to be updated. But if JSF hasn't rendered the component in first place, then JavaScript can't find anything to update.
The solution is to simply reference a parent component which is always rendered.
<h:form>
...
<h:commandButton ...>
<f:ajax ... render=":text" />
</h:commandButton>
</h:form>
<h:panelGroup id="text">
<h:outputText ... rendered="#{not empty user}" />
</h:panelGroup>
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
I am having some issues with my <h:dataTable> where I cannot get it to update/refresh upon submitting an <f:ajax> request which, resides within this table component. The <f:ajax> listener attribute triggers a specific row to be removed from the <h:dataTable>. Could someone please assist me in getting this to work.
Code fragment from my JSF page:
<h:dataTable id="table1">
<h:column>
<f:facet name="header">Object Name:</f:facet>
<h:outputText value="#{object.name}"/>
</h:column>
<h:column>
<f:facet name="header">Action:</f:facet>
<h:form>
<h:commandButton value="Delete">
<f:ajax listener="#{objectBean.delete(object.id)}" render=":table1"/>
</h:commandButton>
</h:form>
</h:column>
</h:dataTable>
I have also tried to wrap this <h:dataTable> component within a <h:panelGroup> component and it still did not work unfortunately. Any tips on getting this to work?
Refer to : Datatable not rendering with ajax call in jsf
Move your to wrap the whole datatable, check your network traffic in chrome F12 to see what the sent/returned response is and see if its giving you back the right table to update.
I have a problem getting AJAX and a h:selectOneMenu to work together. I have a select box and when the user selects an entry, then I would the value inserted into myFacade.secondaryAttribute and then re-render the panelGroup called details.
I've found a lot of threads about this, and I have tried converts, change listeners and nothing works :-( If I add a commandButton and attach ajax to this - then I get a server error.
serverError: class java.lang.NullPointerException
My code snippet:
<h:form>
<h:panelGroup layout="block" styleClass="dropdown">
<h:selectOneMenu value="#{myFacade.secondaryAttribute}" id="secondaryAttribute">
<f:selectItems value="#{myFacade.attributes}" var="attribute" itemLabel="#
{attribute.description}" itemValue="#{attribute}"></f:selectItems>
<f:ajax event="change" render=":details"></f:ajax>
</h:selectOneMenu>
</h:panelGroup>
</h:form>
<h:panelGroup id="details">
...
</h:panelGroup>
I hope that someone has an idea as to what I'm doing wrong - or whether this is not possible at all (found some forum threads saying that you cannot use ajax with h:selectOneMenu?)
Thanks in advance.
/Søren
How can I refresh an element outside the form through ajax render .
<ui:repeat var="o">
<h:form>
<h:panelGroup id="someid">
...
</h:panelGroup>
<div>
<h:commandButton action="#{o.doSomething}">
<f:ajax event="action" render="someid :rehreshthistoo" />
</h:commandButton>
</div>
<h:form>
</ui:repeat>
<h:panelGroup id="rehreshthistoo">
...
</h:panelGroup>
Your code looks fine. Although it would only work if the <h:panelGroup id="rehreshthistoo"> is not already by itself in another UINamingContainer component and also if you haven't changed the default JSF naming container separator of : to something else such as _ or -.
The ultimate answer should be found in the JSF-generated HTML source. Open the page in the browser, rightclick and View Source, locate the generated <span> element of <h:panelGroup id="rehreshthistoo"> in there and then use exactly its ID in your <f:ajax render> with the naming container separator as prefix. If it contains an auto-generated ID of some UINamingContainer parent, then you should give that parent component a fixed ID as well.
See also:
Communication in JSF 2.0 - Ajax rendering of content outside form
I want the following form to use AJAX. So the comments are shown after clicking the command button and without reloading the page. What needs to be changed, using Java Server Faces 2.0?
Functionality: This form provides an inputText to define a topic. After pressing the commandButton, it is searched for comments regarding this topic. Comments are shown in a dataTable, if there are any. Otherwise Empty is shown.
<h:form id="myForm">
<h:outputLabel value="Topic:" for="topic" />
<h:inputText id="topic" value="#{commentManager.topic}" />
<h:commandButton value="read" action="#{commentManager.findByTopic}" />
<h:panelGroup rendered="#{empty commentManager.comments}">
<h:outputText value="Empty" />
</h:panelGroup>
<h:dataTable
id="comments"
value="#{commentManager.comments}"
var="comment"
rendered="#{not empty commentManager.comments}"
>
<h:column>
<h:outputText value="#{comment.content}"/>
</h:column>
</h:dataTable>
</h:form>
You need to tell the command button to use Ajax instead. It's as simple as nesting a <f:ajax> tag inside it. You need to instruct it to submit the whole form by execute="#form" and to render the element with ID comments by render="comments".
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax execute="#form" render="comments" />
</h:commandButton>
Don't forget to ensure that you've a <h:head> instead of a <head> in the master template so that the necessary JSF ajax JavaScripts will be auto-included.
<h:head>
...
</h:head>
Also, the element with ID comments needs to be already rendered to the client side by JSF in order to be able to be updated (re-rendered) by JavaScript/Ajax again. So best is to put the <h:dataTable> in a <h:panelGroup> with that ID.
<h:panelGroup id="comments">
<h:dataTable rendered="#{not empty commentManager.comments}">
...
</h:dataTable>
</h:panelGroup>
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
You need to modify your button:
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax render="comments" />
</h:commandButton>
This means, when the button is clicked, the action is executed, and the dataTable will be rendered and updated. This only works if the backing bean is at least view-scoped.