Here is a Facelets file which is used to get first and last name and after that will go to the another Facelets file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head><title>User Form</title></h:head>
<h:body>
<h:form>
<h:panelGrid columns="2">
<p:graphicImage value="resources/images/image.jpg" width="50%"/>
<p:panelGrid columns="2" width="50%">
<f:facet name="header">
User Form
</f:facet>
<h:outputLabel for="firstname" value="Firstname: *"/>
<p:inputText id="firstname" value="" label="Firstname"/>
<h:outputLabel for="surname" value="Surname: *"/>
<p:inputText id="surname" value="" required="true" label="Surname"/>
<f:facet name="footer">
<p:commandButton type="button" value="Save" icon="ui-icon-check" style="margin:0" action="construction"/>
</f:facet>
</p:panelGrid>
</h:panelGrid>
</h:form>
</h:body>
</html>
I expected to go to the construction.xhtml when I press the "Save" button, but nothing happens. How is this caused and how can I solve it?
when you are using commandButton you must do something like this:
<p:commandButton value="Save" icon="ui-icon-check" style="margin:0" action="#{someBean.navigate}"/>
it means that you must use managed bean
and in your case you must use button instead of commandButton
Related
Some, but not all UI Components are not responding.
Restart, rebuild code and clean caches.
Part of the template file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="title">JKPGBooking /.::.\ Boka online på ED</ui:insert></title>
</h:head>
<h:body>
<h:panelGrid columns="3">
<ui:insert name="menu">
<ui:include
src="/WEB-INF/template/header_#{userbean.currUser.role}.xhtml"></ui:include>
</ui:insert>
<p:spacer style="width: 100px; height: 10px;"></p:spacer>
<ui:insert name="content_row1_col2" />
</h:panelGrid>
<ui:insert name="content_row2_col1">
</ui:insert>
<ui:insert name="footer">
<ui:include src="/WEB-INF/template/footer.xhtml"></ui:include>
</ui:insert>
</h:body>
</html>
part of the .xhtml
<ui:define name="content_row1_col2">
<h:form>
<p:growl id="growl" showDetail="true" sticky="false" />
<br />
<br />
<p:panelGrid columns="5" id="userform">
<f:facet name="header">
<p:outputLabel value="Vem har bokat salen?" />
</f:facet>
<h:outputText value="vecka" />
<p:selectOneMenu value="#{infobean.week}" autoWidth="true" >
<f:selectItems value="#{infobean.allWeeks}" >
</f:selectItems>
</p:selectOneMenu>
<h:outputText value="Dag" />
<p:selectOneMenu value="#{infobean.day}">
<f:selectItems value="#{infobean.days}">
</f:selectItems>
</p:selectOneMenu>
<h:commandButton value="Sök"
action="#{infobean.getHouseSchedule}" update="resultTab">
</h:commandButton>
</p:panelGrid>
</h:form>
</ui:define>
Everything renders nicely but in this case only the button of the form is responding will says is fired. If I enlarge the page in the browser by changing the zoom the SelectOneMenu for the day is responding too, but never the the SelectOneMenu for the week. If I remove the panelGrid the form works as intended.
this is one example of the problem. On another page are tabs generatered by a script, in most cases 12-14. Often the last two or three are not responding/firing and there is no mouseover/hiver response. What really fiddles me is that is not always the case.
I have an index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Project1</title>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<h:form id="mainForm">
<ui:include src="/WEB-INF/includes/offer.xhtml">
</ui:include>
<p:messages/>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
using template.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:insert name="content"/>
</h:body>
</html>
and including /WEB-INF/includes/offer.xhtml
<ui:composition>
<ui:include src="/WEB-INF/dialogs/offerdialog.xhtml">
</ui:include>
<p:commandButton value="Dialog 1 (doesn't repond to mode change)"
onsuccess="PF('myDialogVar1').show();">
</p:commandButton>
<p:commandButton value="Dialog 2 (does respond to mode change)"
onsuccess="PF('myDialogVar').show();">
</p:commandButton>
</ui:composition>
including /WEB-INF/dialogs/offerdialog.xhtml
<ui:composition>
<p:dialog id="myDialog1" widgetVar="myDialogVar1" modal="true">
<h:form>
<h:panelGroup>
<p:outputLabel value="Edit mode:"/>
<p:selectOneButton value="#{offers.creationMode}">
<f:selectItems value="#{offers.creationModes}"/>
<p:ajax update="#form"/>
</p:selectOneButton>
</h:panelGroup>
<p:panelGrid>
<p:row>
<p:column>
<p:outputLabel value="Row 1:"/>
</p:column>
<p:column>
<p:inputText>
<p:ajax/>
</p:inputText>
</p:column>
</p:row>
<p:row rendered="#{offers.displayAdvancedModeComponents()}">
<p:column>
<p:outputLabel value="Row 2:"/>
</p:column>
<p:column>
<p:inputText>
<p:ajax/>
</p:inputText>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</p:dialog>
<p:dialog id="myDialog" widgetVar="myDialogVar" modal="true">
<h:form>
<h:panelGroup>
<p:outputLabel value="Edit mode:"/>
<p:selectOneButton value="#{offers.creationMode}">
<f:selectItems value="#{offers.creationModes}"/>
<p:ajax update="#form"/>
</p:selectOneButton>
</h:panelGroup>
<p:panelGrid>
<p:row>
<p:column>
<p:outputLabel value="Row 1:"/>
</p:column>
<p:column>
<p:inputText>
<p:ajax/>
</p:inputText>
</p:column>
</p:row>
<p:row rendered="#{offers.displayAdvancedModeComponents()}">
<p:column>
<p:outputLabel value="Row 2:"/>
</p:column>
<p:column>
<p:inputText>
<p:ajax/>
</p:inputText>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</p:dialog>
</ui:composition>
The first dialog myDialog does not respond to changes of the creation mode (BASIC and ADVANCED) whereas the second identical myDialog does. The first one should respond as well like it does when everything is declared in index.xhtml without using the template.
The dialogs are identical in order to show that the issue occuring for the first dialog and not for the second doesn't have anything to do with the structure of the dialog. The example doesn't have any function except illustrating the unexpected behavior (p:inputText isn't bound to backing bean values, etc.).
MCVE is at https://github.com/krichter722/primefaces-datatable-row-not-updated.
I'm using Primefaces 6.1.
I generated a Primefaces based CRUD website starting from JPA Entities with netbeans and after adjusting the Update dialog to fit my needs I am experiencing several problems. The domain Model is quite easy: I have an entity Invitation which contains several Guests.
#Entity
public class Invitation implements Serializable {
...
#OneToMany(cascade = CascadeType.ALL, orphanRemoval = true, mappedBy = "invitationId")
private List<Guest> guestList;
public List<Guest> getGuestList() {
return guestList;
}
...
}
I have an overview page (list.xhtml) where all the invitations are listed and the user can pick one to edit it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui" template="/template/layout.xhtml">
<ui:define name="content">
<h:form id="InvitationListForm">
<p:dataTable var="invitation" id="datalist"
value="#{invitationController.invitations}" resizableColumns="true"
selectionMode="single" selection="#{invitationController.selected}"
rowKey="#{invitation.invitationId}" paginator="true" rows="10"
rowsPerPageTemplate="10,30,50,100" draggableColumns="true">
<p:ajax event="rowSelect" update="createButton editButton " />
<p:ajax event="rowUnselect" update="createButton editButton " />
<p:column headerText="Name">
<h:outputText id="invitationName" value="#{invitation.name}" />
</p:column>
...
<f:facet name="footer">
<p:commandButton id="createButton" icon="ui-icon-plus"
value="#{msgs.lbl_add_new}" update=":InvitationCreateForm"
oncomplete="PF('InvitationCreateDialog').show()" />
<p:commandButton id="editButton" icon="ui-icon-pencil"
value="#{msgs.lbl_edit}" update=":InvitationEditForm"
oncomplete="PF('InvitationEditDialog').show()"
disabled="#{empty invitationController.selected}" />
</f:facet>
</p:dataTable>
</h:form>
<ui:include src="create.xhtml" />
<ui:include src="edit.xhtml" />
</ui:define>
</ui:composition>
Note that layout.xhtml doesn't contain any form (no nested forms).
The dialog edit.xhtml is divided into 2 parts: one where the user can enter the invitation "head" information and another one with a datatable where she can edit / add / delete guests.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<body>
<ui:composition>
<h:form id="InvitationEditForm">
<p:dialog id="InvitationEditDlg" widgetVar="InvitationEditDialog"
modal="true" resizable="false" appendTo="#(body)"
header="#{msgs.lbl_add_new}">
<h:panelGroup id="display">
<p:panelGrid columns="2"
rendered="#{invitationController.selected != null}">
<p:outputLabel value="#{msgs.lbl_name}" for="name" />
<p:inputText id="name"
value="#{invitationController.selected.name}" required="true"/>
...
</p:panelGrid>
<p:dataTable var="aGuest" id="guestTable" style="width: 1200px;"
value="#{invitationController.selected.guestList}"
resizableColumns="false" rowIndexVar="idx" draggableColumns="true">
<p:column width="80" headerText="#{msgs.lbl_name}">
<p:inputText id="guestName" value="#{aGuest.name}" />
</p:column>
...
<p:column width="20">
<p:commandButton
actionListener="#{invitationController.addNewGuest}"
id="addGuestButton" update="guestTable" icon="ui-icon-plusthick"
title="+" />
<p:commandButton
actionListener="#{invitationController.deleteGuest(idx)}"
id="deleteGuestButton" update="guestTable"
icon="ui-icon-minusthick" title="-" immediate="true"
rendered="#{invitationController.selected.guestList.size()>1}" />
</p:column>
</p:dataTable>
<p:commandButton actionListener="#{invitationController.save}"
value="#{msgs.lbl_save}"
update="display,:InvitationListForm:datalist,:growl"
oncomplete="handleSubmit(args,'InvitationEditDialog');" />
<p:commandButton value="#{msgs.lbl_cancel}" immediate="true"
actionListener="#{invitationController.cancel}"
onclick="PF('InvitationEditDialog').hide()" />
</h:panelGroup>
</p:dialog>
</h:form>
</ui:composition>
</body>
</html>
And the Controller
#SessionScoped
#Named
public class InvitationController implements Serializable {
private Invitation selected; //with getter and setter
}
Now, I think my problem should be in the combination of p:dialog and h:form.
The original generated version of edit.xhtml had the form InvitationEditForm nested within the dialog and not the contrary as I posted above. The problem with that was after clicking editButton the dialog was loaded, but the dataTable was always filled with guests of the first Invitation I selected in my session (more strangely, suppose the first invitation in the session had just a guest A: after selecting an Invitation with 2 guests B and C I got A and B displayed). As the controller was returning the right guestList(), I supposed there was a problem with update and inverting form and display solved this problem..
Unfortunately this didn't solve all the problems, as now the actionListener for addGuestButton and deleteGuestButton doesn't get invoked anymore..
I am really confused: can you please help me to fix my code? Thanks in advance!
i want to use prime faces to create a panel and my .xhtml is :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:body>
<p:panelGrid columns="2">
<f:facet name="header">
Basic PanelGrid
</f:facet>
<h:outputLabel for="firstname" value="Firstname: *"/>
<p:inputText id="firstname" value="" label="Firstname"/>
<h:outputLabel for="surname" value="Surname: *"/>
<p:inputText id="surname" value="" required="true" label="Surname"/>
<f:facet name="footer">
<p:commandButton type="button" value="Save" icon="ui-icon-check" style="margin:0"/>
</f:facet>
</p:panelGrid>
</h:body>
</html>
the result is :
but the desired output is :
what this problem caused and how can i resolve it?
In order to themes work you'll need to add that to your project. Since you're using normal project(non maven). Download the all-themes jars from here
Add that jar to your build path and try running again.
I have this code, currently working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialog"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton
value="Aggiorna"
actionListener="#{clientiController.aggiorna}"
update=":form:clienti"
icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton
value="Nuovo Cliente"
actionListener="#{clientiController.nuovo}"
update=":formDialog:clienteEditDialog"
oncomplete="clienteEditDialog.show()" />
</h:form>
<h:form id="formDialog">
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
Now I'd really like my dialog to be modal, so I add modal=true to my .
The result is my dialog appears "under" the overlay.
After a bit searching, I found that appendToBody=true would solve my problem, so I try it and my dialog appears the right way.
But... WTF??! Buttons inside the dialog stop working!!
BUG? Or is there any solution?
Move <h:form id="formDialog"> inside the dialog
Because when you use appendToBody=true the content of the dialog being appended to the BODY of your page... And in you case its being taken outside the h:form and as you know commandButtons must reside within a h:form in order to work....
Like this
<p:dialog appendToBody="true".....
<h:form id="formDialog">
.....
When working with dialogs allays remember to place your h:forms inside the dialog...