Below is code of xhtml page,
even i put dialog in a form or not i can see outputtexts below of the page.
I am running into such situation for the first time.
<h:form id="form">
<h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
<p:dataTable id="cars" var="book" value="#{indexView.mediumBooksModel}" paginator="true" rows="10"
selection="#{indexView.selectedBook}" rowKey="">
<f:facet name="header">
RadioButton Based Selection
</f:facet>
<p:column selectionMode="single" style="width:2%" />
<p:column headerText="Title" style="width:25%">
#{book.title}
</p:column>
<p:column headerText="ISBN" style="width:25%">
#{book.isbn}
</p:column>
<p:column headerText="Year" style="width:24%">
#{book.year}
</p:column>
<p:column headerText="Price" style="width:24%">
#{book.price}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":displaySingle" oncomplete="singleBookDialog.show()"/>
</f:facet>
</p:dataTable>
</h:form>
<p:dialog id="dialog" header="Book Detail" widgetVar="singleBookDialog" resizable="false"
modal="true" >
<h:panelGrid id="displaySingle" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/books/#{indexView.selectedBook.image}.jpg"/>
</f:facet>
<h:outputText value="Title:" />
<h:outputText value="#{indexView.selectedBook.title}" style="font-weight:bold"/>
<h:outputText value="Year:" />
<h:outputText value="#{indexView.selectedBook.year}" style="font-weight:bold"/>
<h:outputText value="ISBN:" />
<h:outputText value="#{indexView.selectedBook.isbn}" style="font-weight:bold"/>
<h:outputText value="Price:" />
<h:outputText value="#{indexView.selectedBook.price}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
Related
I'm using primefaces and I want to populate two datatables with same list.
When I select any one of the books, two panels are shown. The first one shows the details of the book and the author(s). The authors being displayed in the first panel is an editable datatable. I also want to display the same datatable in the second panel. But as you can see it says "No records found". How do I achieve it?
My jsf page is as below:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/templates/Layout.xhtml">
<ui:define name="content">
<f:view>
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<p:dataTable value="#{webBooks.entries}" var="book" id="bookList"
styleClass="order-table"
rows="3" paginator="true" editMode="true" editable="true">
<div>
<f:facet name="header">
<p:outputLabel value="Books List"/>
</f:facet>
</div>
<p:columnGroup type="header">
<p:row>
<p:column style="width:10px"/>
<p:column headerText="Id" style="width:30px"/>
<p:column headerText="Book Title" style="width:200px"/>
<p:column headerText="Price" style="width:30px"/>
</p:row>
</p:columnGroup>
<p:column>
<p:commandButton update=":form:bookDetail"
onclick="PF('bookDialog').show(), PF('authorDialog').show()"
title="View Book Detail"
icon="fa fa-info-circle">
<f:setPropertyActionListener value="#{book}" target="#{webBooks.selectedBook}"/>
</p:commandButton>
</p:column>
<p:column>
<p:outputLabel value="#{book.id}"/>
</p:column>
<p:column>
<p:outputLabel value="#{book.title}"/>
</p:column>
<p:column>
<p:outputLabel value="#{book.price}"/>
</p:column>
</p:dataTable>
<p:panelGrid columns="2">
<p:panel id="bookDetail"
header="Book Info"
closable="true"
toggleable="true"
widgetVar="bookDialog" visible="false" style="width:420px;height:250px;">
<p:panelGrid columns="2"
rendered="#{not empty webBooks.selectedBook}">
<h:outputLabel value="Id" />
<p:outputLabel value="#{webBooks.selectedBook.id}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.id}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Title"/>
<p:inputText value="#{webBooks.selectedBook.title}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.title}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Price"/>
<p:inputText value="#{webBooks.selectedBook.price}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.price}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Author(s)" />
<p:dataTable value="#{webBooks.selectedBook.authoredBy}"
var="authoredBy"
id="authorList"
scrollable="true"
scrollHeight="70"
scrollWidth="300"
editable="true">
<p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
<p:columnGroup type="header">
<p:row>
<p:column style="width:30px" headerText="Id"/>
<p:column style="width:100px" headerText="Author Name"/>
</p:row>
</p:columnGroup>
<p:column>
<p:outputLabel value="#{authoredBy.id}"/>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panelGrid>
<p:commandButton value="Edit"
action="#{webBooks.edit(webBooks.selectedBook)}"
rendered="#{not webBooks.selectedBook.editable}"
update=":form:bookDetail"/>
<p:commandButton value="Save"
actionListener="#{webBooks.save(webBooks.selectedBook)}"
rendered="#{webBooks.selectedBook.editable}"
update="bookList"
process="#form"
id="save"
oncomplete="PF('bookDialog').close()"/>
<p:commandButton value="Cancel"
actionListener="#{webBooks.cancel(webBooks.selectedBook)}"
rendered="#{webBooks.selectedBook.editable}"
update=":form:bookDetail"/>
<p:commandButton value="Delete"
actionListener="#{webBooks.remove(webBooks.selectedBook)}"
onclick="return confirm('Are you sure?')"
id="remove"
update="bookList"
process="#form"
oncomplete="PF('bookDialog').close()"/>
</p:panel>
<p:panel header="Author Info"
widgetVar="authorDialog"
closable="true"
toggleable="true"
visible="false" style="width:420px;height:250px;">
<p:panelGrid columns="2">
<p:dataTable value="#{webBooks.selectedBook.authoredBy}"
var="authoredBy"
id="authorsList"
scrollable="true"
scrollHeight="150"
scrollWidth="300"
editable="true">
<p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
<p:columnGroup type="header">
<p:row>
<p:column style="width:30px" headerText="Id"/>
<p:column style="width:100px" headerText="Author Name"/>
</p:row>
</p:columnGroup>
<p:column>
<p:outputLabel value="#{authoredBy.id}"/>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panelGrid>
</p:panel>
</p:panelGrid>
</h:form>
</f:view>
</ui:define>
You are only updating update=":form:bookDetail" in your "View Book Detail" button. Add an ID to the panel "Author Info" and update that as well:
<p:commandButton update=":form:bookDetail :form:authorDetail"
...>
...
</p:commandButton>
...
<p:panel id="authorDetail"
header="Author Info"
...>
...
</p:panel>
See also:
Can 'update' attribute update two components simultanously?
I am sorry for my English. I have a JBoss Seam Project and using primefaces in user interface.We have a dialog and inside a datatable. When i select a row im getting following error
ERROR [org.hibernate.engine.jdbc.spi.SqlExceptionHelper] (http-localhost-127.0.0.1-8080-1) javax.resource.ResourceException: IJ000460: Error checking for a transaction
PersistenceException org.hibernate.exception.GenericJDBCException: Could not open connection
I thought maybe this error about hibernate but When i tired a lot of way about this problem i couldnt done it But when i moved dialog to new xhtml page it was done.I want to use dialog for my project instead of new page.Where is my mistake following code?
<h:form id="vehicleForm">
<p:commandButton id="selectClientButton" value="Musteri Sec" actionListener="#{clientFacade.clientSearchClear()}" />
</h:form>
<h:form id="selectClientForm">
<p:dialog widgetVar="selectClientDialog" resizable="true" draggable="true" modal="true" header="Arac Satis">
<h:panelGrid columns="4">
<h:outputText value="Adi" />
<h:outputText value="Soy Adı" />
<h:outputText value="TC/Vergi No." />
<h:outputText value="" />
<p:inputText value="#{clientFacade.client.name}" />
<p:inputText value="#{clientFacade.client.lastName}" />
<p:inputText value="#{clientFacade.client.taxNo}" />
<p:commandButton value="ARA" update=":selectClientForm:clientListDT" />
</h:panelGrid>
<p:dataTable id="clientListDT" rows="10" value="#{clientFacade.clientList}" var="client" >
<p:column style="width:3%" >
<p:commandLink id="test" actionListener="#{vehicleStockFacade.selectClient(client.clientId)}" ajax="false" >
<h:graphicImage value="#{icon.icon_select_mine_small}" rendered="#{client.isMyClient}" title="#{msg.choose}" width="15" height="15"/>
<h:graphicImage value="#{icon.icon_select_not_mine_small}" rendered="#{!client.isMyClient}" width="15" height="15" />
</p:commandLink>
</p:column>
<p:column>
<f:facet name="header" >
<h:outputText value="#{msg.client_name}" />
</f:facet>
<h:outputText value="#{client.name}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.client_lastname}" />
</f:facet>
<h:outputText value="#{client.lastName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.tax_no}" />
</f:facet>
<h:outputText value="#{client.taxNo}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.cell_phone}" />
</f:facet>
<h:outputText value="#{clientFacade.useMaskForPhone(client.mobilePhone)}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.town}" />
</f:facet>
<h:outputText value="#{client.town}" />
</p:column>
<p:column>
<f:facet name="header" id="headerId" >
<h:outputText value="#{msg.address}" />
</f:facet>
<h:outputText value="#{client.addressLine1}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.post_code}" />
</f:facet>
<h:outputText value="#{client.postCode}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Secimi Kaldir" action="#{vehicleStockFacade.removeClientFromVehicleStock()}" style="float:right;margin-bottom:5px" ajax="false" />
</f:facet>
</p:dialog>
</h:form>
<h:form id="main_form">
<p:treeTable var="catalog" value="#{catalogSelectBean.root}" lazy="true" selection="#{myView.selectedCatalogNode}" selectionMode="single">
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{catalog.name}" />
</p:column>
<p:column width="100">
<f:facet name="header">
<h:outputText value="Desc"/>
</f:facet>
<h:outputText value="#{catalog.description}"/>
</p:column>
</p:treeTable>
<!-- The problem commandButton below-->
<p:commandButton action="#{myView.updateProductListForSelectedCatalog}"
update=":main_form:selectProductTable" value="Bring products">
</p:commandButton>
<!-- The problem commandButton above-->
<p:dataTable id="selectProductTable" var="product" value="#{myView.productDataModel}" paginator="true" selection="#{myView.selectedProduct}" >
<f:facet name="header">
Product Selection
</f:facet>
<p:column selectionMode="single" />
<p:column headerText="name">
<h:outputText value="#{product.name}" />
</p:column>
</p:dataTable>
<p:commandButton action="#{myView.setSelectedProductToForm}"
update="main_form"
value="Set">
</p:commandButton>
</h:form>
the problem commandButton does not fire action, if i had selected something in selectproducttable.
I'm working with Primefaces.My functionality is to display the records in a datatable with primefaces inline editing .Here we have an "Add" button which displays a dialog to enter new record.After entering the values and click on "Save" button,the record is inserted and the datatable is updated with the record.
My problem is, when i click on "Add" button for the second time the dialog box is not opening.Here is my code.
<h:form id="myForm" prependId="false">
<p:dataTable var="client" id="clientTable" value="#{clientView.clientModelList}" paginatorPosition="top" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,20,25" rowEditListener="#{clientView.rowEditListener}" onRowEditUpdate="growl" >
<p:column style="width:60px;">
<p:rowEditor/>
<h:commandButton style="padding-left:5px;" image="/resources/images/delete.jpeg" styleClass="spa" value="delete" immediate="true" actionListener="#{clientView.delete}" >
<f:attribute name="username" value="#{client}" />
</h:commandButton>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{myLoginBean.multilangMap['everis.client.idCliente']}" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{client.codCliente}" />
</f:facet>
<f:facet name="input">
<h:inputText required="true" requiredMessage="#{msg.idClienteEmpty}" maxlength="80" value="#{client.codCliente}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{myLoginBean.multilangMap['everis.client.desCliente']}" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{client.desCliente}" />
</f:facet>
<f:facet name="input">
<h:inputText required="true" requiredMessage="#{msg.desClienteEmpty}" maxlength="255" value="#{client.desCliente}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</div>
<div class="divButPosition">
<h:panelGroup id="buttonPanel">
<p:commandButton id="buttons" value="Add" actionListener="#{clientView.addEmptyClient}"
async="true" update="buttonPanel,dlgForm:table" rendered="#{!clientView.addNewRow}" oncomplete="alert('complete');clientDialog.show();" />
</h:panelGroup>
</div>
</h:form>
<p:growl id="growl" showDetail="false" />
<p:dialog id="clientDialog" header="Client Detail" widgetVar="clientDialog" resizable="false" width="500" showEffect="explode" hideEffect="explode" modal="false" closable="false">
<h:form id="dlgForm" >
<h:dataTable var="newclient" id="table" value="#{clientView.newClient}">
<h:column>
<f:facet name="header">
<h:outputText value="#{myLoginBean.multilangMap['everis.client.idCliente']}" />
</f:facet>
<h:inputText value="#{newclient.codCliente}" required="true" requiredMessage="#{msg.idClienteEmpty}" maxlength="80"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="#{myLoginBean.multilangMap['everis.client.desCliente']}" />
</f:facet>
<h:inputText value="#{newclient.desCliente}" required="true" requiredMessage="#{msg.desClienteEmpty}" maxlength="255"/>
</h:column>
</h:dataTable>
<p:commandButton value="everis.save" actionListener="#{clientView.saveClient}" async="true" update="growl,buttonPanel,clientTable" oncomplete="handleRequest(args ,document.getElementById('clientDialog'))" />
<p:commandButton value="#{myLoginBean.multilangMap['everis.cancel']}" immediate="true" update="buttonPanel,table" async="true" actionListener="#{clientView.cancelClient}" oncomplete="clientDialog.hide();" />
</h:form>
</p:dialog>
Thanks alot for every one.
Now correct me if i'm wrong, but if you click save on the dialog you never close it? I won't know if it will help but you can try atleast
why when i add a seconde DataTable in my page i lose the entire content of this page ? im using JSF PrimeFaces.
This is my first DataTable:
<p:tab title="Projet">
<!-- ======================== Contenu ======================== -->
<br/>
<h:form id="form">
<p:dataTable var="car" value="xxxxx" selection="xxxx" selectionMode="single">
<f:facet name="header">
Listes des projets Gpsi
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="Code" />
</f:facet>
<h:outputText value="xxxx" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Intitulé" />
</f:facet>
<h:outputText value="xxxx" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Dernière Etat" />
</f:facet>
<h:outputText value="xxxx" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Domaine" />
</f:facet>
<h:outputText value="xxxx" />
</p:column>
<f:facet name="footer">
<p:commandButton value="Ouvrire" image="ui-icon ui-icon-search" update="form:display" oncomplete="carDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" width="200" showEffect="clip" hideEffect="fold">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/cars/xxxx.jpg"/>
</f:facet>
<h:outputText value="Model:" />
<h:outputText value="xxxx" />
<h:outputText value="Year:" />
<h:outputText value="xxxx" />
<h:outputText value="Manufacturer:" />
<h:outputText value="xxxx" />
<h:outputText value="Color:" />
<h:outputText value="xxxx" />
</h:panelGrid>
</p:dialog>
</h:form>
And this one in the seconde tab :
<p:tab title="Objets">
<h:form id="form">
<p:dataTable var="car" value="pppp"
selection="mmmm" selectionMode="single">
<f:facet name="header">
Liste des Objets
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="Model" />
</f:facet>
<h:outputText value="Model" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Year" />
</f:facet>
<h:outputText value="Year" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Manufacturer" />
</f:facet>
<h:outputText value="Manufacturer" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Color" />
</f:facet>
<h:outputText value="Color" />
</p:column>
<f:facet name="footer">
<p:commandButton value="View" image="ui-icon ui-icon-search"
update="form:display" oncomplete="carDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
width="200" showEffect="clip" hideEffect="fold">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="sss"/>
</f:facet>
<h:outputText value="Model:" />
<h:outputText value="xxx" />
<h:outputText value="Year:" />
<h:outputText value="xxx" />
<h:outputText value="Manufacturer:" />
<h:outputText value="xxx" />
<h:outputText value="Color:" />
<h:outputText value="xxx" />
</h:panelGrid>
</p:dialog>
</h:form>
<!-- ======================== FIN Contenu ===================== -->
</p:tab>
You should try to enclose your tabView with a single h:form, then place your dataTables inside your tabs:
<h:form id="form">
<p:tabView id="myTabView">
<p:tab id="firstTab">
<p:dataTable ....>
....
</p:dataTable>
</p:tab>
<p:tab id="secondTab">
<p:dataTable ....>
....
</p:dataTable>
</p:tab>
</p:tabView>
</h:form>
Two forms with the same id="form" --> error. Rename one of the forms.