I have a Session Managed Bean where I have a list that I show in datatable and when I click in button I change the list in the managed bean but the table didnt change in the JSF page :
<p:commandButton id="someId" value="Button" action="#{gestionduplanning.exec2()}">
<f:ajax render="koka"/>
</p:commandButton>
<p:dataTable id="koka" var="op" value="#{gestionduplanning.listop}" style="width: 700px;float: left;">
<p:column headerText ="operateur" style="width:50px;" >
<h:outputText value="#{op.operateur.matricule}"/>
</p:column>
</p:dataTable>
How can I update the table in JSF and I need to keep my managed bean as session bean?
Remove <f:ajax render="koka"/> and add update="koka" to your <p:commandButton
<p:commandButton update="koka" id="someId" value="Button" action="#{gestionduplanning.exec2()}"/>
Also you better don't nest f:ajax with inside Primefaces components and vice versa...
f:ajax is meant to use with native JSF components
p:ajax is meant to use with PrimeFaces components
It is fine to have both , Primefaces components and JSF native components in one page, just make sure to use p:ajax in Primefaces components and f:ajax in JSF native components
First thing, you are using PrimeFaces, p:commandButton are already AJAX so you don't need f:ajax :
<p:commandButton id="someId" value="Button" action="#{gestionduplanning.exec2()}" update="koka" />
Other thing, make sure your data source (getListop()) is updated in the bean by exec2().
Refresh primefaces datatable using Java when clicking on the button.
DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("formId:dataTableId");
dataTable.reset();
PrimeFaces.current().ajax().update("formId:dataTableId");
Related
How to update a div and do partial submission using <h:commandButton>, I have previously used <p:commandButton> to do partial submission by setting the ajax attribute to true and the update attribute to :statusBlock, where the id of the <h:panelGroup> is statusBlock. I am having some designing issues with <p:commandButton> so I cannot use it so I have to use <h:commandButton>.
This is to be done by nesting a <f:ajax> in it.
In effects,
<p:commandButton ... process="#form" update=":statusBlock" />
does exactly the same as
<h:commandButton ...>
<f:ajax execute="#form" render=":statusBlock" />
</h:commandButton>
Note that the subtle difference with the PrimeFaces equivalent is that PrimeFaces defaults to #form in the process/execute, while the <f:ajax> one defaults to #this, so you might need to explicitly specify execute="#form" over all place where you didn't specify the process attribute in the PrimeFaces component.
See also:
Communication in JSF 2.0 - Ajax (asynchronous) POST form
You can just use the standard components alongside f:ajax e.g.
<h:form id="myForm">
<h:commandButton value="Push Me">
<f:ajax execute="myForm" render="statusBlock" />
</h:commandButton>
<h:panelGroup id="statusBlock">
</h:panelGroup>
</h:form>
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?
I am using PrimeFaces. Here is the code:
<h:form>
<p:dataTable...>
<p:column...>
<p:commandLink id="featuresLinkId"...>
</p:column>
</p:dataTable>
</h:form>
<p:blockUI block=":smForm" trigger="featuresLinkId">
<p:graphicImage alt="loader image" value="/images/loader.gif"/>
</p:blockUI>
When the page is being loaded, I see the following error:
javax.servlet.ServletException:
Cannot find component with identifier "featuresLinkId" in view.
Seems like commandLink can't be used to trigger blockUI in such a scenario. What could the problem be?
Because it won't find that compnent because its inside the form/datatable.
Make changes as
1-
<h:form id="formId">
2-
<p:dataTable id="tbl">
3-
<p:blockUI block=":smForm" trigger=":formId:tbl:featuresLinkId">
Try above .
There's a bug in Primefaces 3.5 I think
see: How to reference p:commandLink in p:dataTable from p:blockUI trigger?
You could try using JQuery BlockUI http://www.malsup.com/jquery/block/
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>
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?