Well, i'm starting to use Composite JSF 2.0 and i have a following problem.
This is my composite:
<!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"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
</composite:interface>
<composite:implementation>
<p:ajax event="rowSelect" update="#form" />
<p:ajax event="rowUnselect" update="#form" />
</composite:implementation>
</html>
And i'm trying to use this composite in this way:
<p:dataTable rowKey="#{cartao.id}" var="cartao"
value="#{cartaoCreditoMB.beans}" paginator="true"
emptyMessage="Não foi encontrado nenhum registro" rows="10"
id="dataTableCartoesCredito" selection="#{cartaoCreditoMB.bean}"
selectionMode="single">
<application:rowSelectUnSelect />
</p:dataTable>
But i got the following error:
/resources/application/rowSelectUnSelect.xhtml #14,45 <p:ajax> Unable to attach <p:ajax> to non-ClientBehaviorHolder parent
These two lines :
<p:ajax event="rowSelect" update="#form" />
<p:ajax event="rowUnselect" update="#form" />
have to be nested in a component that implements the ClientBehaviourHolder interface.
Possibly, you need to nest those <p:ajax> inside the <p:dataTable> instead:
<p:dataTable ...>
<p:ajax ... />
...
</p:dataTable>
since the DataTable class does implement the ClientBehaviourInterface.
Related
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 have a p:dataTable and the selected value is throwing null pointer when Im tring to get it,this situation is after put the datatable inside a modal p:dialog, but if remove the modal atribute works fine.
PD:the modal p:dialog was behid the overlay like this question
Primefaces - AjaxStatus - Dialog is behind the overlay
the answer is not working for me, because Im using primefaces 5.1, so I have to use appendTo="#(body)"
I don´t know if that is important for my problem.
Resume: the null pointer exist if the p:dialog is modal.
Here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition template="/resources/sysged.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:define name="vDoc">
<h:form id="form">
<p:panel header="Document">
<h:panelGrid columns="4">
<p:commandButton id="prev"
actionListener="#{DocumentController.priviousPage()}"
icon="ui-icon-circle-triangle-w" update="docImage next prev"
disabled="#{DocumentController.inicioLista}" />
<p:commandButton id="next"
actionListener="#{DocumentController.nextPage()}"
icon="ui-icon-circle-triangle-e" update="docImage prev next"
disabled="#{DocumentController.finalLista}" />
<p:commandButton id="anotacoes" value="Anotaçoes"
onclick="PF('dialogAnotacao').show();" />
<p:button id="voltar" outcome="pesquisaDocumento.xhtml"
value="Voltar" />
</h:panelGrid>
</p:panel>
</h:form>
<h:form id="panotation">
<p:dialog id="dialogAnotacao" closeOnEscape="true" header="Anotaçoes"
widgetVar="dialogAnotacao" modal="true" resizable="false"
appendTo="#(body)" draggable="true">
<p:dataTable id="tanotation" var="anotation"
value="#{DocumentController.arquivo.anotacaoList}"
selectionMode="single"
selection="#{DocumentController.selected}"
rowKey="#{anotation.i}">
<p:column headerText="Indice" style="text-align:left">
<h:outputText value="#{anotation.i}" />
</p:column>
<p:column headerText="text" style="text-align:left">
<h:outputText value="#{anotation.text}" />
</p:column>
</p:dataTable>
<p:contextMenu for="tanotation">
<p:menuitem value="do" update="tanotation"
icon="ui-icon-close" actionListener="#{DocumentController.doit}">
</p:menuitem>
</p:contextMenu>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
My method in the managedBean
public void doit() {
System.out.println(selected);
}
You append your <p:dialog> to the body of the html page(see appendTo attribute), as a result it is not included in any <h:form>.
This could be a problem for your <p:dataTable>
Could you place your <h:form id="panotation"> inside of your <p:dialog> and not outside ?
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 have implemented a composite component in JSF using primefaces.
<ui:component ...>
<cc:interface>
<cc:facet name="header"/> ...
<cc:interface>
<cc:implementation>
<p:dataTable>
<f:facet name="header">
<c:choose>
<c:when test="#{empty cc.attrs.metadata.headerText}">
<cc:insertFacet name="header" required="true"/>
</c:when>
<c:otherwise>
#{cc.attrs.headerText}
</c:otherwise>
</c:choose>
</f:facet> ...
</dataTable>
</cc:implementation>
When I use it in a normal page it works fine as expected rendering the datatable.
<ui:composition>
<nav:dataTable/>
<f:facet name="header">
<h:outputText value="headerText" />
</f:facet>
</ui:composition>
But when I use it inside a dialog which uses the above composite component, it throws
component.xhtml #28,54
Unable to find facet named 'header' in parent
composite component with id 'j_idt129'
I am making a ajax call to invoke this dialog on click of a link. The dialog comes in different shape and throwing this error in console. Has anyone faced it ? Any help is really appreciable.
cc:insertFacet inserts the whole f:facet tag, so you shouldn't wrap it into another f:facet tag within the composite implementation. As you are writing a custom p:dataTable I think it's easier to overwrite the already existing header facelet as an interface declaration and conditionally render it using JSTL utilities:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<composite:interface>
<composite:facet name="header" />
<composite:attribute name="title" />
</composite:interface>
<composite:implementation>
<p:dataTable>
<!-- If the facet is given at parent, insert it.
Otherwise, provide the title given by the attribute -->
<c:choose>
<c:when test="#{not empty cc.facets.header}">
<composite:insertFacet name="header" />
</c:when>
<c:otherwise>
<f:facet name="header">
#{cc.attrs.title}
</f:facet>
</c:otherwise>
</c:choose>
<p:column headerText="column" />
</p:dataTable>
</composite:implementation>
</h:body>
</html>
Using it as:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:comp="http://java.sun.com/jsf/composite/comp">
<f:view>
<h:head />
<h:body>
<h:form>
<comp:myTable title="header">
<f:facet name="header">
<h:outputText value="text" />
</f:facet>
</comp:myTable>
<comp:myTable title="Custom header" />
<p:commandButton type="button" onclick="dialog.show()"
value="show in dialog" />
<p:dialog widgetVar="dialog">
<comp:myTable title="header">
<f:facet name="header">
<h:outputText value="text" />
</f:facet>
</comp:myTable>
</p:dialog>
</h:form>
</h:body>
</f:view>
</html>
I'm trying to add a contextMenu to a dataTable contained inside a tab. I have been able to get the menu to show up on a dataTable which is not inside a tab and was also to get it to show up on the entire tab...but not specifically on the dataTable.
I've tried several different references in the 'for' attribute of the contextMenu...some blow up, some do not but the menu doesn't show up on right-click.
I'm using PrimeFaces 4.0. Any suggestions?
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="someForm">
<p:tabView id="tv" var="tb" value="#{TempBeans.tabs}">
<p:ajax event="tabClose" listener="#{TempBeans.tabClose}"
update="#form" />
<p:tab id="tempTab" title="#{tb.name}" closable="true">
<p:dataTable id="dTable" var="d" value="#{tb.dtbs}">
<p:column id="column1" headerText="name">
<h:outputText value="#{d.name}" />
</p:column>
<p:column id="column2" headerText="id">
<h:outputText value="#{d.id}" />
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
<p:contextMenu for=":someForm:tv:dTable">
<p:menuitem value="TableView" update="#form" icon="ui-icon-search" />
<p:menuitem value="TableDelete" update="#form" icon="ui-icon-close" />
</p:contextMenu>
</h:form>
</h:body>
</html>
Well, I was able to get the context menu to appear by changing the table to be selectable...which is sort of what I wanted anyway. However, now I have another problem...If I make the selectionMode "multiple" and use ctrl-clicks to select rows it seems to register the last right-click as a single click.
click one row
ctrl-click second row
ctrl-click third row
right-click one of the rows...deselects other rows
So it seems I would have to force my users to:
click one row
ctrl-click second row
ctrl-right-click third row
AAAAAAAAAAAAAAAAAAAAAAAAAAARRRRGH!! Deal-breaker...looks like I'm going back to prehistoric ui times and implementing multiple selection with checkboxes.
Please someone tell me I'm wrong and there's a simple way to make it not behave like this.
Anyway, here is how I eventually managed to get a contextMenu to show up:
<!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:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="someForm">
<p:tabView id="tv" var="tb" value="#{TempBeans.tabs}">
<p:ajax event="tabClose" listener="#{TempBeans.tabClose}" update="#form" />
<p:tab id="tempTab" title="#{tb.name}" closable="true">
<p:dataTable id="dTable" var="d" value="#{tb.dtbs}" selection="#{tb.selectedDTBs}" selectionMode="multiple" rowKey="#{d.name}">
<p:column id="column1" headerText="name">
<h:outputText value="#{d.name}" />
</p:column>
<p:column id="column2" headerText="id">
<h:outputText value="#{d.id}" />
</p:column>
</p:dataTable>
<p:contextMenu id="cMenuId" for="dTable">
<p:menuitem value="TableView" update="#form" icon="ui-icon-search" />
<p:menuitem value="TableDelete" update="#form" icon="ui-icon-close" />
</p:contextMenu>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>