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>
Related
This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 2 years ago.
When I click addTagButton, everything works well. It updates all three components: tags, tagId and addTagButton.
<p:commandButton id="addTagButton" icon="ui-icon-plus"
action="#{searchBean.addTag}"
update="tags, tagId, addTagButton"
disabled="#{searchBean.tagChoices.size() == 0}">
</p:commandButton>
Here's the table component:
<h:dataTable id="tags" var="tag" value="#{searchBean.tags}">
<h:column>
<div style="text-align:right;">
<h:outputLabel value="#{tag.typeName}:"/>
</div>
</h:column>
<h:column>
<p:inputText id="tag" size="25" value="#{tag.typeValue}"
disabled="#{searchBean.searchForParent}"/>
</h:column>
<h:column>
<p:commandButton id="delTagButton" icon="pi pi-trash"
action="#{searchBean.deleteTag}"
update=":contentForm:tagId, :contentForm:addTagButton, tags">
<f:setPropertyActionListener
target="#{searchBean.tagId}"
value="#{tag.typeName}" />
</p:commandButton>
</h:column>
</h:dataTable>
When i click on delTagButton that is on each row in tags table, action works fine, :contentForm:tagId and :contentForm:addTagButton update fine. But tags table which is where clicked command button exist, does not update.
When a row is deleted, change must reflect in the tags table which does not work.
Now, If I change h:dataTable to p:dataTable or any other primefaces component, it works. I am trying to make it work with h:dataTable.
Primefaces 8.0, JSF 2.5
Look on this simple example:
<h:form id="form">
<h:panelGroup id="wrapper" layout="block">
<h:dataTable id="table" border="1" value="#{testBean.list}" var="person">
<h:column>#{person.name}</h:column>
<h:column>#{person.surname}</h:column>
<h:column>
<p:commandButton id="delTagButton" icon="pi pi-trash"
action="#{testBean.remove(person)}" update="table">
</p:commandButton>
</h:column>
</h:dataTable>
</h:panelGroup>
</h:form>
To really find out what is being updated look in browser console.
If you're trying to update="table" nothing happens (like in your code). If you try to update a parent of the table (which is often a case), you will get an error an error:
SEVERE: Error Rendering View[/example.xhtml]
org.primefaces.expression.ComponentNotFoundException: Cannot find component for expression "wrapper" referenced from "form:table:0:delTagButton".
at org.primefaces.expression.SearchExpressionFacade.cannotFindComponent(SearchExpressionFacade.java:677)
So we could try with "older" parent and realize that update="#form" works! OK, so we want to help to find id="table\wrapper" component. Let try clientId update="form:table". Like with update="table" nothing happens. And no error from PF (so the element can be found). This could mean that h:dataTable cannot be properly re-rendered from inside itself (but I don't want to throw stones:-)). This is often a case with e.g. popups in JSF 3rd party component libraries.
In this particular example I'd say, you have to update form:wrapper (adding form: works) or just #form to get it work. With your code it would be the same. Try to update some table parent or the whole form.
All of above is tested in JSF 2.2, with last RF, an old PF and OmniFaces. But I think the same would be the case with newer versions.
BTW. I didn't know there is JSF 2.5 :-)
This question already has an answer here:
Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
(1 answer)
Closed 7 years ago.
I am trying to show a dialog from either the web page, or from the bean. In either case it gives the above error and doesn't seem to be able to find the component in PF. I'm using PrimeFaces 5.2, and I don't seem to have the multiple version issue that was discussed here
I have pasted the relevant xhtml code below - the exact same behaviour occurs when I try to call it from the bean with:
RequestContext.getCurrentInstance().execute("PF('dlgTask').show();");
<ui:composition template="template-restricted.xhtml">
<ui:define name="body_content">
<div id="title" class="sl-title">#{text['project.title']} </div>
<p:dialog
id="taskDialog"
widgetVar="dlgTask"
modal="true"
closeOnEscape="true">
<h:form id="taskDialogForm">
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="taskName" value="#{text['name']}" />
<p:inputText
id="taskName"
value="#{editProject.editTask.name}" />
</p:panelGrid>
</h:form>
</p:dialog>
<p:commandButton
title="#{text['project.task.new']}"
disabled="#{not editProject.canEditProject}"
action="#{editProject.createNewTask}"
process="#form"
update="#form"
oncomplete="PF('dlgTask').show();"
icon="fa fa-plus" />
This was caused by unrelated javascript in a menu section which declared a jquery.js library. When I removed the offending import, all of the strange Primefaces errors went away. It seems declaring other jquery libraries interferes with Primefaces 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
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 answers here:
p:commandbutton action doesn't work inside p:dialog
(4 answers)
Closed 6 years ago.
I'm currently working on a CRUD form and is now working on the last part which should be the most easiest - delete. But I want to show a dialog before the user can do the actual deletion. And this is where I'm having problem with Primefaces 3.4. For some reason I cannot set the action in the button inside the p:dialog, ajax=false failed. So here's what I did:
<p:column headerText="#{msgs['action.delete']}"
styleClass="a-center">
<p:commandButton icon="ui-icon-trash"
oncomplete="confirmation.show()">
<f:setPropertyActionListener
target="#{marketingCodeBean.marketingCode}" value="#{code}"></f:setPropertyActionListener>
</p:commandButton>
</p:column>
The Dialog:
<p:confirmDialog id="confirmDialog"
message="#{msgs['message.marketingCode.confirmDelete']}"
header="#{msgs['common.confirmDelete']}" severity="alert"
widgetVar="confirmation">
<p:commandButton id="confirm" value="#{msgs['common.yes']}"
oncomplete="confirmation.hide()" update=":form:mktgCodeTable"
actionListener="#{marketingCodeBean.remove}" />
<p:commandButton id="decline" value="#{msgs['common.no']}"
onclick="confirmation.hide()" type="button" />
</p:confirmDialog>
I'm aware that the actionListener should not be use for business action, but I can't think of a workaround given the datatable and the dialog. Any idea on how I can make ajax=false in p:commandButton inside p:confirmDialog?
Once rendered, the dialog's HTML output is by some onload JavaScript relocated to end of HTML <body> in order to achieve the best cross-browser compatible overlay/positioning. However, this thus means that if it was placed inside a <form>, it would not be in a <form> anymore and synchronous (non-ajax) requests would then not work anymore. This is not exactly an action vs actionListener issue.
The <p:dialog> (and <p:confirmDialog> as you seem to be actually using) should have its own <h:form> component.
<h:form>
<p:dataTable>
...
</p:dataTable>
</h:form>
...
<p:confirmDialog>
<h:form>
...
</h:form>
</p:confirmDialog>