In Primefaces, a button will call a prepareCreate method and then open the form dialog. The issue is, this method never get called so that the form in the dialog is not shown.
Command button
<p:commandButton id="createButton1" value="#{bundle.Create}" actionListener="#{purchaseOrderController.prepareCreate}"
update=":PurchaseOrderCreateForm11" oncomplete="PF('PurchaseOrderCreateDialog11').show()"/>
Dialog
<p:dialog id="PurchaseOrderCreateDlg11" widgetVar="PurchaseOrderCreateDialog11" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.CreatePurchaseOrderTitle}">
<h:form id="PurchaseOrderCreateForm11">
<h:panelGroup id="display">
<p:panelGrid columns="2" rendered="#{purchaseOrderController.selected != null}">
<p:outputLabel value="#{bundle.CreatePurchaseOrderLabel_orderNum}" for="orderNum" />
<p:inputText id="orderNum" value="#{purchaseOrderController.selected.orderNum}" title="#{bundle.CreatePurchaseOrderTitle_orderNum}" required="true" requiredMessage="#{bundle.CreatePurchaseOrderRequiredMessage_orderNum}"/>
<p:outputLabel value="#{bundle.CreatePurchaseOrderLabel_quantity}" for="quantity" />
<p:inputText id="quantity" value="#{purchaseOrderController.selected.quantity}" title="#{bundle.CreatePurchaseOrderTitle_quantity}" />
<p:outputLabel value="#{bundle.CreatePurchaseOrderLabel_shippingCost}" for="shippingCost" />
<p:inputText id="shippingCost" value="#{purchaseOrderController.selected.shippingCost}" title="#{bundle.CreatePurchaseOrderTitle_shippingCost}" />
</p:panelGrid>
<p:commandButton actionListener="#{purchaseOrderController.create}" value="#{bundle.Save}" oncomplete="handleSubmit(args,'PurchaseOrderCreateDialog11');"/>
<p:commandButton value="#{bundle.Cancel}" onclick="PurchaseOrderCreateDialog11.hide()"/>
</h:panelGroup>
</h:form>
</p:dialog>
JSF managed bean
#Named("purchaseOrderController")
#SessionScoped
public class PurchaseOrderController implements Serializable {
public PurchaseOrder prepareCreate() {
System.out.println("Purchase order prepare create");
selected = new PurchaseOrder();
initializeEmbeddableKey();
return selected;
}
}
Related
I want to create edit form for Primefaces table. I tested this code:
<h:form id="form">
<p:dataTable id="tbl" var="systemuser" value="#{systemusers.systemUsers}"
selectionMode="single" selection="#{systemusers.selectedSystemUser}" rowKey="#{systemuser.username}" lazy="true"
resizableColumns="true"
>
<p:ajax event="rowSelect" listener="#{systemusers.onRowSelect}" update=":form:carDetail" oncomplete="PF('carDialog').show()" />
....................
</p:dataTable>
<p:dialog id="wd" header="System User Details" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputLabel for="id" value="ID" />
<p:outputLabel id="id" value="#{systemusers.selectedSystemUser.id}" rendered="#{not systemusers.editable}"/>
<h:inputText value="#{systemusers.selectedSystemUser.id}" rendered="#{systemusers.editable}" />
........
</p:panelGrid>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton value="Edit System User" rendered="#{not systemusers.editable}"
actionListener="#{systemusers.editRecord(false)}">
<f:ajax render=":form:wd" execute=":form:wd"></f:ajax>
</p:commandButton>
<p:commandButton value="Cancel" rendered="#{systemusers.editable}" actionListener="#{systemusers.editRecord(true)}">
<f:ajax render=":form" execute=":form"></f:ajax>
</p:commandButton>
</f:facet>
</p:dialog>
<p:contextMenu for="tbl">
<p:menuitem value="View" update="carDetail" icon="fa fa-search" oncomplete="PF('carDialog').show()"/>
<p:menuitem value="Delete" update="tbl" icon="fa fa-remove" actionListener="#{systemusers.deleteSystemUser}">
<p:confirm header="Confirmation" message="Are you sure?" icon="fa fa-warning" />
</p:menuitem>
</p:contextMenu>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="fa fa-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="fa fa-remove" />
</p:confirmDialog>
</h:form>
Managed bean:
#Named
#RequestScoped
public class Systemusers implements Serializable
{
.......
public void editRecord(boolean editable)
{
SessionFactory factory = HibernateUtils.getSessionFactory();
Session session = factory.getCurrentSession();
try
{
session.getTransaction().begin();
SystemUsersModel obj = new SystemUsersModel();
obj.setId(selectedSystemUser.getId());
..........
session.update(obj);
session.getTransaction().commit();
this.editable = editable;
}
catch (Exception e)
{
e.printStackTrace();
session.getTransaction().rollback();
}
}
......
private boolean editable = false;
public boolean isEditable()
{
return editable;
}
public void setEditable(boolean editable)
{
this.editable = editable;
}
}
When I open the Edit form and I click button Edit System User the form disappears. Probably because I render and execute it. How I can execute the form and under it without closing it?
The example code is bad in multiple ways. Two things stand out:
It is not an [mcve]
<f:ajax render=":form" execute=":form"> is superfluous or might even cause the weird behaviour
OP most likely does not know that (quote from the PrimeFaces showcase , emphasis mine)
CommandButton
CommandButton extends the standard h:commandButton with ajax, partial processing and skinning features.
So the commandBotton is already ajax anabled and does not need to hava a
<f:ajax render=":form" execute=":form">
inside it. This (most likely) makes an the update run twice. One #none (Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes) and one updating the form. The second one most likely does not have any content. But trying (and debugging) will make things clear. If this is not the answer, the reason cannot be seen in the code and hence it should have been a [mcve]
This question already has an answer here:
How to show details of current row from p:dataTable in a p:dialog and update after save
(1 answer)
Closed 6 years ago.
The following code implements a datatable inside a layout, in the datatable i added an edit button in each row
<p:dataTable id="tbl" var="person" value="#{mybean.listPersons}" >
<p:column>
<f:facet name="header">
<h:outputText value="Name " />
</f:facet>
<h:outputText value="#{person.name}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Age :" />
</f:facet>
<h:outputText value="#{person.age}" />
</p:column>
<p:column>
<p:commandButton icon="ui-icon-pencil"
oncomplete="PF('dlg1').show();" action="mybean.setSelectedPerson(person)" />
</p:column>
</p:dataTable>
When i click on the edit button, the dialog box (code below) is shown but the inputs are empty, what i wanted is to show the infos of the row in the dialog bow, i'm still a beginner, i searched everywhere... but no results
<p:dialog header="Modify" widgetVar="dlg1" >
<h:form >
<p:growl id="msgs" showDetail="true" />
<h:panelGrid id="form2" value="#{myBean.person}" var="person">
<p:outputLabel value="Name :" />
<p:inputText value="#{person.name}" />
<p:outputLabel value="Age :" />
<p:inputText value="#{person.age}" />
<p:commandButton value="Submit" action="#{myBean.modifyPerson(person)}" />
</h:panelGrid>
</h:form>
</p:dialog>
#ManagedBean
#RequestScoped
public class muBean implements Serializable{
private Person selectedPerson;
//getter and setter
public void modifyPerson(Person p) {
this.selectedPerson = p;
}
}
i would be so grateful if anyone can help, i really need this
Change the command button to the following, use an actionlistener:
<p:commandButton icon="ui-icon-pencil" update=":persondlgid" oncomplete="dlg1.show();" actionListener ="mybean.findSelectedPerson">
<f:param name="personalid" value="#{person.id}" />
<p:commandButton/>
This is the dialog, add the id property to it. Then change the value of the panel grid to selectedPerson because this corresponds to the correct object in the managedbean:
<p:dialog header="Modify" widgetVar="dlg1" id="persondlgid" >
<h:form>
<p:growl id="msgs" showDetail="true" />
<h:panelGrid id="form2" value="#{myBean.selectedPerson}" var="person">
<p:outputLabel value="Name :" />
<p:inputText value="#{person.name}" />
<p:outputLabel value="Age :" />
<p:inputText value="#{person.age}" />
<p:commandButton value="Submit" action="#{myBean.modifyPerson(person)}" />
</h:panelGrid>
</h:form>
</p:dialog>
The managed bean function should look as follows. This action listener is called when the button is clicked and it then retrieves the id of the selected person and loops through the list of persons to find the one you are looking for:
public void findSelectedPerson(ActionEvent event){
if(event.getComponent().getAttributes().get("personid") != null){
Map<String,String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
int personid = (params.get("personid")!= null) ? Integer.parseInt(params.get("personid")) : -1;
// Loop through the persons array
for(Person p : listPersons){
if(p.getId() == personid){
selectedPerson = p;
break;
}
}
}
This question already has an answer here:
Ajax update/render does not work on a component which has rendered attribute
(1 answer)
Closed 7 years ago.
I have an inputText and a selectOneRadio component, when form load selectOneRadio should be hidden. When user select inputText, I want to show the selectOneRadio component. I have made the selectOneRadio hidden in #PostConstruct, which should be display on select inputText.
<h:panelGrid id="panelgrid">
<p:panel id="panel" >
<h:outputLabel value="Name: " for="name" />
<p:inputText id="name" value="#{userBean.name}" immediate="true">
<p:ajax event="onselect" update="city" listener="#{userBean.showName}" />
</p:inputText>
<p:selectOneRadio id="city" value="#{userBean.city}" layout="grid" columns="3" rendered="#{userBean.displayName}" >
<f:selectItems value="#{userBean.cities}" var="c" itemLabel="#{city}" itemValue="#{city}" />
</p:selectOneRadio>
</p:panel>
</h:panelGrid>
The bean code is like:
#PostConstruct
public void init() {
displayName = false;
}
public boolean isShowName() {
return true;
}
...
But some how this is not working. I'm using JSF2.0 with primefaces 5.2.
I found the solution.
<h:form id="frm">
<h:panelGrid id="panelgrid">
<p:panel id="panel" >
<h:outputLabel value="Name: " for="name" />
<p:inputText id="name" value="#{userBean.name}" immediate="true" onkeypress="#{userBean.showName}">
<p:ajax event="change" update="frm:panelgrid" listener="#{userBean.inputcangeeListener}" />
</p:inputText>
</p:panel>
<p:panel id="p2" rendered="#{userBean.displayName}">
<p:selectOneRadio id="city" value="#{userBean.city}" layout="grid" columns="3">
<f:selectItems value="#{userBean.cities}" var="c" itemLabel="#{city}" itemValue="#{city}" />
</p:selectOneRadio>
</p:panel>
</h:panelGrid>
</h:form>
And my managed bean looks like-
#PostConstruct
public void init() {
displayName = false;
}
public boolean isShowName(){
return displayName;
}
public void inputcangeeListener(javax.faces.event.AjaxBehaviorEvent changeEvent){
setDisplayName(true);
cities = new ArrayList<>();
cities.add("pune");
cities.add("KOL");
}
Thanks for your response.
working with a Primefaces data table and dialog. Each record in data table has a link as such:
<p:commandLink value="#{item.pk}" update=":itemUpdateForm:display"
onclick="PF('itemUpdateDialog').show();" title="Edit">
<f:setPropertyActionListener value="#{item}"
target="#{itemController.selecteditem}" />
</p:commandLink>
The link opens a primefaces dialog successfully the first time but after I submit the form in this popup dialog, which updates that recordset, the links in the datatable will no longer open the dialog again unless I hit refresh on the browser.
Here is the update button in the p:dialog:
<f:facet name="footer">
<p:commandButton value="Update" update=":ItemListForm:dataTable, :growl"
oncomplete=" handleSubmitRequest(xhr, status, args, 'itemDlg','itemUpdateForm');"
actionListener="#{itemController.doUpdateItem()}" />
<p:commandButton type="reset" value="Reset"></p:commandButton>
</f:facet>
And scopes/pertinent code:
itemController
#ManagedBean
#ViewScoped
public class ItemController implements Serializable {
#PostConstruct
public void init() {
items= itemListProducer.getItems();
}
public void doUpdateItem() {
itemRepository.update(selectedItem);
itemEventSrc.fire(selectedItem);
items = itemListProducer.getitems();
Messages.addAjaxMessage("Update Operation Was Successful!");
}
List Producer
#ApplicationScoped
public class ItemListProducer implements Serializable {
Edit
per comment here is DataTable and the Primefaces update dialog
<h:form id="ItemListForm">
<p:dataTable id="dataTable" var="item"
value="#{itemController.items}"
paginator="true" rows="10"
selection="#{itemController.selectedItems}" rowKey="#{item.oc_id}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
lazy="false" rowsPerPageTemplate="10,15,50">
<f:facet name="header">
Items (#{itemController.items.size()})
</f:facet>
<p:column selectionMode="multiple" style="width:18px"/>
<p:column filterBy="#{item.oc_id}" sortBy="#{item.oc_id}">
<f:facet name="header"><h:outputText value="OC #" /></f:facet>
<p:commandLink value="#{item.pk}" update=":itemUpdateForm:display" onclick="PF('itemUpdateDialog').show();" title="Edit">
<f:setPropertyActionListener value="#{item}" target="#{itemController.selecteditem}" />
</p:commandLink>
</p:column>
more p:columns
<f:facet name="footer">
<p:commandButton value="New item" onclick="PF('dlg1').show();" title="Creates new Item" />
<p:commandButton value="Delete Selected Items"
actionListener="#{itemController.doDeleteItems}"
update="#form, :growl">
<p:confirm header="Confirmation" message="Are you sure you want to remove the selected Items?" />
</p:commandButton>
</f:facet>
</p:dataTable>
<p:confirmDialog global="true">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</h:form>
... and dialog
<p:dialog header="Item Update Form" widgetVar="itemUpdateDialog" resizable="false" id="itemDlg">
<h:form id="itemUpdateForm">
<p:panel>
<p:panelGrid id="display" columns="3" cellpadding="4"
style="margin:0 auto;">
<h:outputText value="Title :"></h:outputText>
<p:inputText id="title" value="#{itemController.selectedItem.title}"
required="true"
requiredMessage="Please Enter Title!" />
<p:message for="title" />
other inputs
<f:facet name="footer">
<p:commandButton value="Update" update=":ItemListForm:dataTable, :growl"
oncomplete=" handleSubmitRequest(xhr, status, args, 'itemDlg','itemUpdateForm');"
actionListener="#{itemController.doUpdateItem()}" />
<p:commandButton type="reset" value="Reset"></p:commandButton>
</f:facet>
</p:panelGrid>
</p:panel>
</h:form>
</p:dialog>
EDIT 2
Thanks to help from Michele's Answer, I determined the issue was related to how I was closing the dialog by its id and not by its widgetVar. I was originally passing in just the id which was used with jQuery effect 'shake', and then closing that object. By adding the widgetVar and using Michele's var d = (typeof dialogWv === "string") ? PF(dialogWv) : dialogWv; I no longer have my issue.
This ultimately works for me:
<p:dialog header="Update Form" widgetVar="itemUpdateDialogWv"
resizable="false" id="itemUpdateDialogId">
<h:form id="itemUpdateForm">
<p:panel>
------content-------
<f:facet name="footer">
<p:commandButton value="Update" update=":ItemListForm:dataTable, :growl"
oncomplete=" handleSubmitRequest(xhr, status, args, 'itemUpdateDialogWv','itemUpdateForm', 'itemUpdateDialogId');"
actionListener="#{itemController.doUpdateItem()}" />
<p:commandButton type="reset" value="Reset"></p:commandButton>
</f:facet>
</p:panelGrid>
</p:panel>
</h:form>
</p:dialog>
function handleSubmitRequest(xhr, status, args, dialogWv, formName, dialogNameId) {
dialog = jQuery('#'+dialogNameId);
var d = (typeof dialogWv === "string") ? PF(dialogWv) : dialogWv;
if(args.validationFailed) {
dialog.effect("shake", { times:5 }, 1000);
} else {
clearForm(formName);
d.hide();
}
}
function clearForm(formName){
jQuery('#'+formName).each(function(){
this.reset();
});
}
Too long for a comment...
You can try:
<p:commandLink value="#{item.pk}" process="#this" update=":itemUpdateForm"
oncomplete="PF('itemUpdateDialog').show();" title="Edit">
<f:setPropertyActionListener value="#{item}" target="#{itemController.selecteditem}" />
</p:commandLink>
specify process="#this": otherwise it defaults to #all and will include the dialog too
use oncomplete instead of onclick
and
<p:commandButton value="Update" process="#form" update="#form, :ItemListForm, :growl"
oncomplete="handleSubmitRequest(xhr, status, args, 'itemDlg','itemUpdateForm');"
actionListener="#{itemController.doUpdateItem}" />
specify process="#form": the same as before
add #form to update: generally is a good practice to update the dialog form tho show validation errors and to close dialog only if not validation failed (I don't know how handleSubmitRequest works, maybe it does exactly this)
However:
No js errors on commandButton click?
Is request fired?
If yes, can you post request params for the not working click?
P.S.
handleSubmitRequest(xhr, status, args, 'itemDlg','itemUpdateForm'); has argument itemDlg. Is it correct?
for completeness here is my hideDialog
function hideDialog(dialog, args, status, xhr)
{
var d = (typeof dialog === "string") ? PF(dialog) : dialog;
if(!args.validationFailed)
{
d.hide();
}
}
which is invoked:
<p:commandButton value="Update" process="#form" update="#form :ItemListForm :growl"
oncomplete="hideDialog('itemUpdateDialog', args)"
actionListener="#{itemController.doUpdateItem}" />
I got a problem where one of my commandbuttons doesn't call the method I gave it and I have no idea why:
<p:layoutUnit position="center">
<h:form>
<p:dialog position="center" widgetVar="benutzerErstellen" visible="true" closable="false" resizable="false" draggable="false">
<h:panelGrid columns="2" cellpadding="5" styleClass="noBorders">
<h:outputLabel for="nachname" value="Nachname:" />
<p:inputText id="nachname" value="#{benutzerverwaltung.nachname}" required="true"/>
<h:outputLabel for="vorname" value="Vorname:" />
<p:inputText id="vorname" value="#{benutzerverwaltung.vorname}" required="true"/>
<h:outputLabel for="benutzername" value="Benutzername:" />
<p:inputText id="benutzername" value="#{benutzerverwaltung.benutzername}" required="true" validator="#{benutzerverwaltung.benutzerUeberschneidungValidate}"/>
<h:outputLabel for="teams" value="Teams:" />
<p:selectCheckboxMenu id="teams" label="Teams" scrollHeight="200" panelStyle="width:300px">
<f:selectItems/>
</p:selectCheckboxMenu>
<h:outputLabel for="passwort" value="Passwort:" />
<p:password id="passwort" feedback="true" value="#{benutzerverwaltung.passwort}" required="true" match="passwortBestaetigung" promptLabel="Bitte geben Sie ein Passwort ein." weakLabel="Schwach" goodLabel="Gut" strongLabel="Stark"/>
<h:outputLabel for="passwortBestaetigung" value="Passwort bestätigen:" />
<p:password id="passwortBestaetigung" value="#{benutzerverwaltung.passwort}" required="true"/>
<f:facet name="footer">
<p:commandButton id="erstellen" value="Benutzer erstellen" action="#{benutzerverwaltung.erstelleBenutzer()}"/>
</f:facet>
</h:panelGrid>
</p:dialog>
<p:growl/>
</h:form>
</p:layoutUnit>
This is the corresponding code:
erstelleBenutzer:
public void erstelleBenutzer(){
Benutzer benutzer = new Benutzer();
System.out.println(vorname);
benutzer.setVorname(vorname);
benutzer.setNachname(nachname);
benutzer.setBenutzername(benutzername);
benutzer.setPasswort(passwort);
this.benutzer.add(benutzer);
FacesMessage message = new FacesMessage("Benutzer wurde erstellt.");
message.setSeverity(FacesMessage.SEVERITY_INFO);
throw new ValidatorException(message);
}
benutzerUeberschneidungValidate:
public void benutzerUeberschneidungValidate(FacesContext ctx, UIComponent component, Object value) throws ValidatorException {
if (benutzerExistiert((String) value) || adminExistiert((String) value)) {
FacesMessage message = new FacesMessage("Benutzer existiert bereits.");
message.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(message);
}
}
I tried removing the validator, I tried removing the Exception from benutzerErstellen(), I tried giving the dialog it's own h:form and much more, but nothing worked. Anyone got an idea?
Earlier versions of PrimeFaces 3 have a bug wherein a commandButton or commandLink doesn't fire the action listener if it is located in the header or the footer.
See the post I have listed at the bottom.
p:commandButton action and f:setpropertyactionlistener not invoked in p:columngroup
I solved this like that
<p:dataTable>
...
<p:column>
...
<p:commandButton id="selectButton" update=":form:dataTable" icon="ui-icon-circle- close" title="Delete" action="#{myBean.doSomething}">
<p:ajax event="click" listener="#{mainPageBean.doRemoveEmployee(employee)}"/>
</p:commandButton>
...
</p:column>
...
</p:dataTable>