So i have a JSF Application. If i submit a form, it gets resubmitted when i refresh the page. and of course i don't want that.
Index.xhtml:
[...]
<h:form >
<h:outputText value="Form"/><br/>
<h:inputText label="first" value="#{example.newExample.firstWord}" autocomplete="off"></h:inputText>
<h:commandButton value="click" actionListener="#{example.NewExample()}">
</h:commandButton>
</h:form>
[...]
The method that gets runned:
public void NewExample(){
pfDB.InsertNewExample(NewExample);
NewExample.setFirstWord(null);
NewExample.setSecondWord(null);
}
So everytime i refresh index.xhtml after i submitted the form, NewExample() get runned.
It was indeed the resubmitting off the form that was the problem. But the browser(opera) didn't showed an alert.
I fixed it by adding
FacesContext.getCurrentInstance().getExternalContext().redirect("index.xhtml");
in my function
Related
So, I've encountered this situation several times when I have a component that displays records, for instance, a list of shipping addresses in a p:dataView component (but it could be any other similar component).
Each row displays a shipping address and within each row, I have an edit and delete command buttons, as shown in next snippet:
<p:dataView id="dvBillingAddresses"
...
<p:commandButton icon="pi pi-pencil"
oncomplete="PF('editBillingAddressDlg').show()"
...
The edit command button would show following dialog:
<p:dialog header="Billing Address Details" showEffect="fade" modal="true"
widgetVar="editBillingAddressDlg" responsive="true" width="450">
...
<f:facet name="footer">
<p:commandButton value="Save" icon="pi pi-check" actionListener="#{bean.saveBillingAddress}"
...
So record would be saved by calling bean method and at the end of said method, I would call PrimeFaces.current().ajax().update("...dvBillingAddresses") to refresh the p:dataView component.
However, what always happens is that the component is refreshed before the data has been completely commited to datasource, causing component to refresh with old data.
What I usually end up doing is to use an ajax close event on the edit dialog to allow extra time to update data.
<p:dialog header="Billing Address Details" showEffect="fade" modal="true"
widgetVar="editBillingAddressDlg" responsive="true" width="450">
<p:ajax event="close" update="...dvBillingAddresses" immediate="true" global="false" />
...
When I have to update components after a confirmation, and since p:confirmDialog doesn't support ajax close events; I catch the click event on the confirmation button and programmatically click a dummy command button that in turn updates the component.
I know these can't be the right approach, as they feel a bit hackish, but so far this has allowed me to continue development.
Ideally, the component should wait to refresh until the entity's #PostLoad event is fired, even if a spinning refresh icon has to show.
I'm using PrimeFaces v11, eclipselink, mysql, jakartaee v8.0 on payara server.
How is everybody else handling this?
Thanks !!!
Try adding an update= attribute to your <p:commandButton/>, so the dataView will be updated after the bean.saveBillingAddress() action is performed.
<p:dialog header="Billing Address Details" showEffect="fade" modal="true"
widgetVar="editBillingAddressDlg" responsive="true" width="450">
<h:form id="editBillingAddressForm">
....
<f:facet name="footer">
<p:commandButton value="Save" icon="pi pi-check"
action="#{bean.saveBillingAddress}"
update="#form ...dvBillingAddresses"
oncomplete="if (!args.validationFailed) PF('editBillingAddressDlg').hide()"/>
I have a huge JSF application created using primefaces version 6.0 running on WebSphere Application Server, Version 8.5.5. I want to avoid nested forms so my p:tabView is not included in a form but each tab has its own form. Source for my tab view looks something like this:
<p:tabView activeIndex="#{tabViewBean.selectedTab}" id="tabView" dynamic="true" cache="false" widgetVar="tabViewWidget">
<p:ajax event="tabChange" listener="#{tabViewBean.handleTabChange}" update=":tabView" />
<p:tab id="tab1" title="First tab">
<h:form id="FirstTabForm">
<ui:include src="/views/test/firstTabTab.xhtml"/>
</h:form>
</p:tab>
<p:tab id="tab2" title="Drugi tab">
<h:form id="SecondTabForm">
<ui:include src="/views/test/secondTab.xhtml"/>
</h:form>
</p:tab>
... more tabs ...
</p:tabView>
Is there a way I can submit the form inside current tab without clicking commandButton inside it. I would like to achieve that on tab change event.
Each tab has 15-20 input fields and I don't want to use ajax on each value change because it is slowing down my application significantly.
I think you can use processattribute with a dynamic selector on tabChange event.
You can see it in action here: Ajax Framework - Partial Process
I have a JSF form with only one input and no submit button. The form is submitted when the user presses Enter. I would like to trigger a backing bean method on submit of that form. How can I achieve this?
<h:form>
<h:inputText value="#{searchBean.propertyName}" />
</h:form>
I don't think that what you are trying to achieve could be done without a submit type input component in the form. If you just don't like a button to be displayed you can hide it in the resulting xhtml page with style="display: none". The form still will be submitted when Enter is pressed and you will get a desired behavior.
<h:form>
<h:inputText value="#{searchBean.propertyName}"/>
<h:commandButton actionListener="#{searchBean.method()}" style="display: none"/>
</h:form>
You can attach a handler to the submit event of the form. If you give your form an ID (eg: "myForm"):
document.getElementById('myForm').addEventListener('submit', function () {
// do stuff
});
You came submit with ajax call-
<h:form>
<div class="search">
<span class="searchIcon icon-magnifier"></span>
<h:inputText value="#{searchBean.propertyName}" id="propertyName"
a:placeholder="" readonly="false"></h:inputText>
<f:ajax event="change" listener="{searchBean.beanMethod}"/>
</div>
I have a simple JSF form:
<h:form>
<h:inputText value="#{textBean.firstName}"/>
<h:inputText value="#{textBean.lastName}"/>
<h:commandButton value="confirm" action="textBean.confirm"/>
<h:commandButton value="submit" action="textBean.submit"/>
</h:form>
It is necessary that before you click "submit" user must press the button "confirm". Otherwise, next to the button "submit" display an error message. A user can not click the submit button, if not pre-pressed to confirm. It is very desirable to do it on a layer of the UI. Some might suggest something about this?
You might want to change the logic so that on click of the submit button a confirmation dialog box is presented to the user. Something simple like this:
<h:form>
<h:inputText value="#{textBean.firstName}"/>
<h:inputText value="#{textBean.lastName}"/>
<h:commandButton value="submit" action="#{textBean.submit}" onclick="return confirm('Confirm form submit?');"/>
</h:form>
Otherwise if you want to get the behaviour mentioned above you could disable / hide the submit button until the user has clicked the confirm button, something like:
<h:form>
<h:inputText value="#{textBean.firstName}"/>
<h:inputText value="#{textBean.lastName}"/>
<h:commandButton value="confirm" action="#{textBean.confirm}"/>
<h:commandButton value="submit" action="#{textBean.submit}" disabled="#{textBean.btnDisabled}"/>
</h:form>
The disabled attribute can be replaced with the rendered attribute if you want to hide the button. It takes a boolean. This boolean variable can be set in your confirm method to true so that when the request comes back the button will be enabled.
I have the following code:
<a4j:commandButton value="Adicionar BOM"
onclick="#{rich:component('addBomModal')}.show()">
<a4j:ajax event="click" immediate="true"
oncomplete="Richfaces.showModalPanel('addBomModal')"
render="addBomModal" />
</a4j:commandButton>
and
<h:form>
<rich:popupPanel id="popup" modal="true" resizeable="true"
onmaskclick="#{rich:component('popup')}.hide()">
// rest of popupPanel
</rich:popupPanel>
</h:form>
The page is rendered but nothing happens when I click the button.
How can this be solved?
Thanks in advance,
gtludwig
You have too many things going on. You first open the pop-up in onclick (button) and then open it again in oncomplete via older API (I'm not sure it was migrated to RichFaces 4). All you need is what you have in onclick, you don't need a4j:ajax.