This question already has an answer here:
Ajax update/render does not work on a component which has rendered attribute
(1 answer)
Closed 6 years ago.
I having a list of items to display, where I wanted to restrict user from clicking the ShowMore button when the set of items have all displayed.
my code:
<div class="row center">
<h:commandButton id="morebutton" rendered="#{homeBean.hasMoreProjects()}" styleClass="hoverable btn-large yellow lighten-2 black-text" value="SHOW MORE" >
<f:ajax listener="#{homeBean.showMore()}" render="result morebutton" />
</h:commandButton>
</div>
The issue here is the button will not be hide whenever the list of items is all shown, but it will be hide when I refresh the whole page.
How can I check the method when I check the button?
Any helps will be much appreciate, Thanks
EDIT 1:
this question is slightly different from the question Ajax update/render does not work on a component which has rendered attribute, this question stating the commandLink button targeting to the button itself for hide/show rendering where the issue from the link is to target the input form
You always need to render the parent component in jsf2, this should work:
<a4j:outputPanel id="morebuttonPanel" styleClass="row center">
<h:commandButton id="morebutton" rendered="#{homeBean.hasMoreProjects()}" styleClass="hoverable btn-large yellow lighten-2 black-text" value="SHOW MORE" >
<f:ajax listener="#{homeBean.showMore()}" render="result morebuttonPanel" />
</h:commandButton>
</a4j:outputPanel>
Related
I have three options for user: two equipment selection and one option to say I don't want equipment. To select two equipment I used p:commandLink. To say I do not want equipment I used h:selectOneRadio.
If user do not want to buy equipment, user can select the option button 'I do not wish to have'. So at anytime, only one button can be selected within the three of them.
If I press h:selectOneRadio button, then other two buttons (p:commandLink) are updating properly to 'select'. But if I select an equipment (p:commandLink), then h:selectOneRadio button is not deselecting even though it's bean value is updated to false.
JSF page
<h:panelGroup id="pwpPanel">
<div class="row">
<ui:repeat value="#{reconBean.EQList}" var="equipment">
<div class="col-md-4">
<div class="btn-fibre-tab text-center">
<ui:fragment rendered="#{reconBean.pwpSelectedEquipmentID != equipment.id }">
<p:commandLink id="selectpwp" process="#form" update=":mainForm:pwpPanel"
styleClass="select_button" action="#{reconBean.updatePWPItem(equipment.id)}"
immediate="true">
Select
<f:ajax render=":mainForm:pwpPanel" />
</p:commandLink>
</ui:fragment>
<ui:fragment rendered="#{reconBean.pwpSelectedEquipmentID eq equipment.id }">
<p:commandLink id="selectedpwp" process="#form" update=":mainForm:pwpPanel"
styleClass="selected_button" action="#{reconBean.updatePWPItem(equipment.id)}"
immediate="true">
Selected
<f:ajax render=":mainForm:pwpPanel" />
</p:commandLink>
</ui:fragment>
</div>
</div>
</ui:repeat>
</div>
<div class="row">
<div class="col-sm-12 ">
<h:selectOneRadio value="#{reconBean.notPurchaseWithPurchase}" id="radioDoNotWant"
name="pwpEquipment">
<f:selectItem itemLabel="I do not wish to have" itemValue="true" />
<f:ajax event="click" execute="#this" listener="#{reconBean.resetPWPSelection}"
render="pwpPanel" />
</h:selectOneRadio>
</div>
</div>
</h:panelGroup>
Bean values
public void updatePWPItem(String itemID) {
pwpSelectedEquipmentID = itemID;
notPurchaseWithPurchase = false;
}
public void resetPWPSelection(AjaxBehaviorEvent event) {
pwpSelectedEquipmentID = null;
}
The problem is the immediate attribute set to true on the CommandLinks. It is essentially to understand the The Lifecycle of a JavaServer Faces Application. The impact of the immediate attribute differs in, on what kind of component it is applied. As stated in a good article:
In the standard JSF lifecycle, the action attribute on an Command component is evaluated in the Invoke Application phase
... if you set immediate="true" on it.
To be honest, i do not exacly know why this prevents your radio option from being unchecked (I am still learning all aspects of the JSF lifecylce), but i think it is because it remains unchanged in the component tree and gets rendered as it was even if the model is updated through your action (if someone may comment on this i will update accordingly).
The solution to your problem is to remove the immediate attribute from your CommandLinks or set it to false.
Some remarks:
PrimeFaces CommandLinks have build in AJAX capabilities which are enabled by default. There is no need to enclose an additional <f:ajax />. Only if you want to disable AJAX you have to set its ajax attribute to false. The render attribute of Ajax conforms to the update attribute of CommandLink.
You are using SelectOneRadio in a context it is not designed for. As stated on JSFToolbox:
This component is designed for situations where you want to display a mutually exclusive list of options to the user as a set of radio buttons.
Consider using another better suited component like CommandLink or CommandButton.
This question already has answers here:
Is it possible to update non-JSF components (plain HTML) with JSF ajax?
(3 answers)
Closed 6 years ago.
I am trying to update the element "entryDiv" in my xhtml from a button inside a form like this:
<div id="entryDiv">
<div>
<h:form id="myForm">
<c:forEach items="#{foodPlanManagementBean.loadRestaurantsHistory()}" var="restaurantHistoryEntry">
<p:commandButton value="MyName" update="entryDiv"/>
</c:forEach>
</h:form>
</div>
Some more unrelated elements here...
</div>
However, this way all I am left with is a ComponentFoundException, tell me that the component could not be located:
Cannot find component for expression "entryDiv" referenced from "form:myForm:j_idt25".
I already read up a bit on SO and I found one solution proposing to put a : in front of the "entryDiv", but that doesn't turn out to give me any different results.
How could I fix this?
JSF can't see the id of your div if it is not a JSF component so you need to convert your div to a h:panelGroup
<h:panelGroup id="entryDiv" layout="block">
<div>
<h:form id="myForm">
<c:forEach items="#{foodPlanManagementBean.loadRestaurantsHistory()}" var="restaurantHistoryEntry">
<p:commandButton value="MyName" update=":entryDiv"/>
</div>
</c:forEach>
</h:form>
</div>
</h:panelGroup>
if you don't put layout="block" it will render a span instead of a div.
This question already has answers here:
Differences between action and actionListener
(4 answers)
Closed 6 years ago.
I have identical actions for commandLink and commandButton. However, commandLink works as expected. But with commandButton no action occurs. Am I missing syntax?
<p:commandLink value="Submit" action="#{beanController.getStr(strSearch)}" ajax="false"/>
<p:commandButton value="Submit" actionListener="#{beanController.getStr(strSearch)}" ajax="false"/>
If you intend for navigation to occur you should use action not actionListener in your commandButton, so:
<p:commandButton value="Submit" action="#{beanController.getStr(strSearch)}" ajax="false"/>
commandButton button generates a HTML <input type="submit"> element and the commandLink generates a HTML <a> and comandButton is using to submit the form whereas commandlink is used to submit a link,so your form is not submitting i'll suggest you to check if there is any nested form is present or not or if there is multiple forms in your code or any other issue which is causing in form submit, if you can then post your code.
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
I have a4j command button in one xhtml page and popup panel in other. I want to open the the popup on commandbutton click in first page.
the command button
auth.xhtml
<a4j:commandButton id="Add" value="Add New" type="submit"
action="#{controller.add}"
render=":addPopupForm:addPopupOp">
<a4j:param value="true" assignTo="#{controller.ind}" ></a4j:param>
</a4j:commandButton>
addPopup.xhtml
<h:form id="addPopupForm">
<a4j:outputPanel id="addPopupOp" ajaxRendered="true">
<rich:popupPanel id="addPopup" domElementAttachment="parent" show="true"
rendered="true" height="600" width="1000" >
Row is added
</rich:popupPanel>
</rich:outputPanel>
</h:form>
I'm not a richfaces user but in general JSF , you can't re-render elements which are not rendered in the first place.
So in your case you should point to addPopupForm , like this :
<a4j:commandButton id="Add" value="Add New" type="submit"
action="#{controller.add}"
render=":addPopupForm" >
Or wrap the a4j:outputPanel with some wrapper that will be always rendered
Also, take a look at this: Can you update an h:outputLabel from a p:ajax listener?
Just rendering the panel does not mean showing it. You have to attach the popup "show" attribute to a property:
show="#{bean.showPopup}"
Set the showPopup boolean in the action method (action="#{controller.add}") and then do render="addPopupForm"