Primefaces Dialog is not displayed for the second time - jsf

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

Related

Primefaces Datatable row selection inside dialog

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>

primefaces - edit row without one cell

I have dataTable with row editing, but i dont need to edit one of my cells (user.username). How can i do this in primefaces? Is this possible? I try remove p:cellEditor for one cell but it does not work on my tablet because when I use this in a DataTable, this column is empty.
Thanks!
my code:
<h:form id="form">
<p:growl id="messages" showDetail="true" />
<p:contextMenu for="dataTable">
<p:menuitem value="Delete" update="dataTable" icon="ui-icon-close"
actionListener="#{userMB.deleteUser}" />
</p:contextMenu>
<p:dataTable id="dataTable" var="user" styleClass="DataTableUsers"
value="#{userMB.userList}" paginator="true" rows="5"
rowKey="#{user.user_id}" selection="#{userMB.selectedUser}"
selectionMode="single" filteredValue="#{userMB.filteredUsers}"
editable="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:ajax event="rowEdit" immediate="true" listener="#{userMB.onEdit}"
update=":form:messages, :form:dataTable" process="#this" />
<p:column sortBy="name" filterBy="name" id="name" headerText="Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{user.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{user.name}" required="true"
requiredMessage="Please Enter Name"
validatorMessage="Name is too short!">
<f:validateLength minimum="2"></f:validateLength>
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="surname" filterBy="surname" headerText="Surname">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{user.surname}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{user.surname}" required="true"
requiredMessage="Please Enter Surname!"
validatorMessage="Surname is too short!">
<f:validateLength minimum="2"></f:validateLength>
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="username" filterBy="username"
headerText="Index number">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{user.username}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{user.username}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="userDescription" filterBy="userDescription"
headerText="descript">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{user.userDescription}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{user.userDescription}" required="true"
requiredMessage="Please Enter User Description" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6%" headerText="Edit">
<p:rowEditor />
</p:column>
<f:facet name="footer">
<p:commandButton value="New User" oncomplete="newUserDialog.show()"
icon="ui-icon-star" title="Creates new user" />
</f:facet>
</p:dataTable>
</h:form>
Just change the component that holds the user.username value to <h:outputText>
<h:outputText value="#{user.username}" />
and you will have the value read-only.

Headers are not shown in exported excel file from primefaces datatable

I have a datatable like this. But it would not export the headers to excel :
<h:form id="formOptionList">
<p:dataTable id="OptionTable"
var="Options"
widgetVar="OptionTable"
value="#{managedBean.options}"
filteredValue="#{managedBean.filteredOptions}"
emptyMessage="No Options found."
rendered="#{managedBean.userPreferences.showTable}"
paginator="true"
rows="10"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="20,50,100"
>
<p:column id="id" headerText="ID" filterBy="id" filterMatchMode="exact" width="12%" rendered="#{managedBean.userPreferences.showID}" >
<h:outputText value="#{options.optionID}" />
</p:column>
....
....
</p:dataTable>
<h:panelGrid columns="1">
<p:panel header="Export All Data">
<h:commandLink>
<p:graphicImage value="../resources/images/menuicons/options.png" />
<p:dataExporter type="xls" target="OptionTable" fileName="Options" />
</h:commandLink>
</p:panel>
</h:panelGrid>
</h:form>
So I changed it to
<p:column id="id" filterBy="id" filterMatchMode="exact" width="12%" rendered="#{managedBean.userPreferences.showID}" >
<f:facet name="header>">
<h:outputText value="Option ID"/>
</f:facet>
<h:outputText value="#{Options.OptionID}" />
</p:column>
And I still don't see the headers in the excel file. Any ideas ?
Headers are not shown in exported excel file from primefaces datatable
Try this:
<p:column id="id" filterBy="#{Options.OptionID}" filterMatchMode="exact" width="12%" rendered="#{managedBean.userPreferences.showID}" >
<f:facet name="header>">
<h:outputText value="Option ID"/>
</f:facet>
<h:outputText value="#{Options.OptionID}" />
</p:column>
You put a <h:outputText value= ""/> after your </f:facet> ?
<p:column>
<f:facet name="header">
<h:outputText value="Your Column Name" />
</f:facet>
<h:outputText value="Your value" />
</p:column>
You can put a new column with display none, from the existing column just put an exporter false
<p:column id="id" filterBy="# Options.OptionID}"filterMatchMode="exact" width="12%" rendered="#anagedBean.userPreferences.showID}"exporter="false">
<f:facet name="header>">
<h:outputText value="Option ID" />
</f:facet>
<h:outputText value="#{Options.OptionID}" />
</p:column>
Add new column with display none and remove all sorting,filtering and rendering
<p:column exporter="true" style="display:none;">
<f:facet name="header>">
<h:outputText value="Option ID"/>
</f:facet>
<h:outputText value="#{Options.OptionID}" />
</p:column>
This works perfectly.

primefaces dialog content is on page at the begining

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>

DataTable PrimeFaces

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.

Resources