This question already has an answer here:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
(1 answer)
Closed 7 years ago.
I'm using JSF 1.2 and RichFaces in my project. I'm trying to implement a scenario which is as follows, I have two rich:panel in my page and their rendered attribute is set to a boolean variable in a bean and the default values of the variable is set to false, so the first time the page is loaded the panels do not get rendered. I have a a4j:commandButton in my page and on the action attribute of the button I am calling a method in my bean which sets the two flag variable but the panels are not getting rendered even after the variables are set, and I am also setting the rerendered attribute of the button, I don't think I am missing any steps.
If component is not rendred when page is loaded then it will not make any change even when you will change the value of boolean variable to true on some commanad button click as well. Your component should be in view to rendered on Button click . So put your component inside another component Please chek below code
Following will not work when #{bean.renderResult} defaults to false:
<h:form id="form">
<h:commandButton value="Submit" action="#{bean.toggleRenderResult}">
<f:ajax render=":result" />
</h:commandButton>
</h:form>
<h:outputText id="result" value="#{bean.result}" rendered="#{bean.renderResult}" />
You need to ensure that the render ID points to a component which is already present in the JSF-generated HTML output.
Following will work:
<h:form id="form">
<h:commandButton value="Submit" action="#{bean.toggleRenderResult}">
<f:ajax render=":result" />
</h:commandButton>
</h:form>
<h:panelGroup id="result">
<h:outputText value="#{bean.result}" rendered="#{bean.renderResult}" />
</h:panelGroup>
For more information check http://balusc.blogspot.in/2011/09/communication-in-jsf-20.html#AjaxRenderingOfContentWhichIsByItselfConditionallyRendered
Related
I have a button to submit a form and invoke a managed bean action.
<h:form>
...
<h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>
But when I press the button it refreshes the whole page and sometimes also changes the URL.
Is there some way to not refresh the page and still invoke the action?
Make use of Ajax. It's a matter of nesting <f:ajax> inside the command button of interest.
<h:form>
...
<h:commandButton ...>
<f:ajax execute="#form" render="#none" />
</h:commandButton>
</h:form>
Particularly the render="#none" (which is the default value anyway, you could just omit the attribute altogether) will instruct JSF to re-render just nothing after the submit. If you intend to re-render only a specific component instead of the whole page, then you could also specify the ID of that specific component in render attribute.
<h:form>
...
<h:commandButton ...>
<f:ajax execute="#form" render="result" />
</h:commandButton>
...
<h:panelGroup id="result">...</h:panelGroup>
</h:form>
If you're already using PrimeFaces, then it's a matter of simply using <p:commandButton> instead of <h:commandButton>. It uses by default ajax already, so you don't need to nest in a <f:ajax>. You only need to remember to use attribute names process and update instead of execute and render.
<h:form>
...
<p:commandButton ... update="result" />
...
<h:panelGroup id="result">...</h:panelGroup>
</h:form>
The execute attribute defaults to #form already, so it could be omitted.
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"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 9 months ago.
I have a page with a form and an input text, that represents the value of a bean. On the bottom of the page, I have a navigation button to go to the next entry:
<h:form id="customerData">
...
<h:outputText value="#{customeredit.customer.name}" />
<br />
<h:inputText size="60" id="name" value="#{customeredit.customer.name}" />
...
</h:form>
<p:commandButton value="Next customer" action="customers" ajax="false" id="nextCustomer">
<f:param name="linkageAreaId" value="#{customeredit.nextCustomer.id}" />
</p:commandButton>
If I click on the button, the page reloads, a new customer object is loaded in the background and all the entries are updated EXCEPT the inputText. The outputText changes, but the inputText always keeps the value it has gotten when it was intialized. I also checked with the getters, the values return from the getters change with new customers, but the value displayed in the inputText always stays the same.
That can happen if you're nesting forms (which is illegal in HTML) and thus both the input and button ultimately end up in the same form. That button would then submit the input field as well. In any case, you should not be using <p:commandButton> for page-to-page navigation. Use <p:button> instead.
<p:button value="Next customer" outcome="customers" id="nextCustomer">
<f:param name="linkageAreaId" value="#{customeredit.nextCustomer.id}" />
</p:button>
Don't forget to fix the nested form problem as well.
See also:
How to navigate in JSF? How to make URL reflect current page (and not previous one)
Difference between h:button and h:commandButton
This question already has an answer here:
Ajax update/render does not work on a component which has rendered attribute
(1 answer)
Closed 8 years ago.
In below code, I click the Submit button. That change boolean result value to true in backing_home bean via a ajax call.
If I remove the rendered rendered="#{backing_home.result}", I see the updated output properly.
But with the below code it is false. I think it doesn't render the new value
<h:commandButton id="MySubmit" value="Submit" action="#{backing_home.toggleRenderResult}">
<f:ajax render=":AjaxGuess:result2"/>
</h:commandButton>
<h:outputText id="result2" value="#{backing_home.result}" rendered="#{backing_home.result}" />
What could be the reason?
I update the code as below based on Hatem Alimam's comment.
<h:commandButton id="MySubmit" value="Submit" action="#{backing_home.toggleRenderResult}">
<f:ajax render=":AjaxGuess:result2"/>
</h:commandButton>
<h:panelGroup id="result2">
<h:outputText value="#{backing_home.result}" rendered="#{backing_home.result}" />
</h:panelGroup>
When I click a method to render a part of the page, it does not change anything until I manually refresh the page.
Here is the bean:
boolean showPage = true;
public boolean getShowPage(){
return showPage;
}
Here is the view:
<h:form>
<p:commandButton value="Click" action="#{bean.hideContents()}" />
</h:form>
<p:panel rendered="#{bean.showPage}">
Contents
</p:panel>
The panel gets hidden when I manually refresh the page, otherwise it does not.
How is this caused and how can I solve it?
You need to update a parent component of the conditionally rendered component. You can do that by specifying its client ID in the update attribute of the <p:commandButton>:
<h:form>
<p:commandButton value="Click" action="#{bean.hideContents}" update=":panel" />
</h:form>
<h:panelGroup id="panel">
<p:panel rendered="#{bean.showPage}">
Contents
</p:panel>
</h:panelGroup>
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
I have a button to submit a form and invoke a managed bean action.
<h:form>
...
<h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>
But when I press the button it refreshes the whole page and sometimes also changes the URL.
Is there some way to not refresh the page and still invoke the action?
Make use of Ajax. It's a matter of nesting <f:ajax> inside the command button of interest.
<h:form>
...
<h:commandButton ...>
<f:ajax execute="#form" render="#none" />
</h:commandButton>
</h:form>
Particularly the render="#none" (which is the default value anyway, you could just omit the attribute altogether) will instruct JSF to re-render just nothing after the submit. If you intend to re-render only a specific component instead of the whole page, then you could also specify the ID of that specific component in render attribute.
<h:form>
...
<h:commandButton ...>
<f:ajax execute="#form" render="result" />
</h:commandButton>
...
<h:panelGroup id="result">...</h:panelGroup>
</h:form>
If you're already using PrimeFaces, then it's a matter of simply using <p:commandButton> instead of <h:commandButton>. It uses by default ajax already, so you don't need to nest in a <f:ajax>. You only need to remember to use attribute names process and update instead of execute and render.
<h:form>
...
<p:commandButton ... update="result" />
...
<h:panelGroup id="result">...</h:panelGroup>
</h:form>
The execute attribute defaults to #form already, so it could be omitted.
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"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?