In dataList i'm displaying records and given edit and delete option,
While deleting i need to check my requirement depending on that i need to delete record,
But after delete DataList is not updating.
Could you please solve my problem...
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:composition template="PageTemplate.html">
<ui:define name="content">
<h:form id="form"
style="width: 70% !important; margin: 100px 0px 0px 205px;">
<!-- <p:growl id="growl" showDetail="true" autoUpdate="true" sticky="false"/> -->
<!-- <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" /> -->
<p:tabView id="TabView" style="height:450px;"
activeIndex="#{appraisalComponent.tabindex}">
<p:ajax event="tabChange"
listener="#{appraisalComponent.getSectionAllList}" update="#form" />
<p:tab id="tab1" title="Create Section">
<p:outputPanel id="createSectionIds">
<p:dataTable id="sectionList" paginator="true" rows="5"
value="#{appraisalComponent.sectionListEdit}" var="sections"
editable="true">
<p:ajax event="rowEdit"
listener="#{appraisalComponent.updateSection(sections)}"
update=":form:TabView:sectionList" />
<p:ajax event="rowEditCancel" update=":form:TabView:sectionList" />
<p:column>
<f:facet name="header">
<h:outputText value="Section Name" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{sections.secName}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{sections.secName}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:rowEditor />
<p:spacer width="20" height="0" />
<p:commandButton includeViewParams="true"
style="margin:-18px 0px 0px 20px;" title="Remove"
update=":form:TabView:createSectionIds"
process=":form:TabView:createSectionIds" icon="ui-icon-trash"
oncomplete="${appraisalComponent.sectionHaveQS(sections)} ? PF('confirmDialogDelete').show() : PF('confirmDialog').show()">
<f:setPropertyActionListener value="#{sections}"
target="#{appraisalComponent.selectedSec}" />
</p:commandButton>
<p:dialog header="Delete confirmation" appendToBody="true"
widgetVar="confirmDialogDelete" resizable="false" id="secDlg"
showEffect="fade" hideEffect="explode" modal="true">
Are you sure, you want to delete Employee:<h:outputText
value="#{appraisalComponent.selectedSec.secName}" />
<br></br>
<p:commandButton value="Yes Sure"
onclick="confirmDialogDelete.hide()"
action="#{appraisalComponent.deleteSection(appraisalComponent.selectedSec)}"
update=":form:TabView:createSectionIds"
process=":form:TabView:createSectionIds"
style=" margin-left: 34px;">
<p:collector value="#{appraisalComponent.selectedSec}"
removeFrom="#{appraisalComponent.sectionListEdit}" />
</p:commandButton>
<p:commandButton value="Not Yet"
onclick="confirmDialogDelete.hide()" type="button" />
</p:dialog>
<!-- <p:commandButton value="Remove" includeViewParams="true"
update=":form:TabView:createSectionIds"
process=":form:TabView:createSectionIds"
oncomplete="${appraisalComponent.sectionHaveQS(sections)} ? PF('confirmDialogDelete').show() : PF('confirmDialog').show()">
<f:setPropertyActionListener value="#{sections}"
target="#{appraisalComponent.selectedSec}" />
</p:commandButton>
<p:dialog header="Delete confirmation" appendTo="#(body)"
widgetVar="confirmDialogDelete" resizable="false"
showEffect="fade" hideEffect="explode" modal="true">
Are you sure, you want to delete Section:<h:outputText
value="#{appraisalComponent.selectedSec.secName}" />
<br></br>
<p:commandButton value="Yes Sure"
onclick="confirmDialogDelete.hide()"
action="#{appraisalComponent.deleteSection(appraisalComponent.selectedSec)}"
update=":form:TabView:createSectionIds"
process=":form:TabView:createSectionIds"
style=" margin-left: 34px;">
<p:collector value="#{appraisalComponent.selectedSec}"
removeFrom="#{appraisalComponent.sectionListEdit}" />
</p:commandButton>
<p:commandButton value="Not Yet"
onclick="confirmDialogDelete.hide()" />
</p:dialog>
-->
<p:dialog header="Delete confirmation" appendTo="#(body)"
widgetVar="confirmDialog" resizable="false" showEffect="fade"
hideEffect="explode" modal="true">
You need to delete questions which are belongs to this section...!<h:outputText
value="" />
<br></br>
<p:commandButton value="Ok" onclick="confirmDialog.hide()"
type="button" />
</p:dialog>
<!-- <p:commandButton value="Remove"
action="#{appraisalComponent.deleteSection(sections)}"
update=":form:TabView:createSectionIds"
process=":form:TabView:createSectionIds">
<p:collector value="#{sections}"
removeFrom="#{appraisalComponent.sectionListEdit}" />
</p:commandButton> -->
</p:column>
</p:dataTable>
</p:outputPanel>
</p:tab>
<p:tab id="tab2" title="Remarks List"
action="#{appraisalComponent.test}">
<p:outputPanel id="remarksIds">
<p:dataTable id="remarksList" paginator="true" rows="5"
value="#{appraisalComponent.remarksListEdit}" var="remarks"
editable="true">
<p:ajax event="rowEdit"
listener="#{appraisalComponent.updateRemarks(remarks)}"
update=":form:TabView:remarksList" />
<p:ajax event="rowEditCancel" update=":form:TabView:remarksList" />
<p:column>
<f:facet name="header">
<h:outputText value="Remarks Name" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{remarks.remName}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{remarks.remName}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Remarks Value" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{remarks.remValue}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{remarks.remValue}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:rowEditor />
<p:commandButton value="Remove"
action="#{appraisalComponent.deleteRemarks(remarks)}"
update=":form:TabView:remarksIds"
process=":form:TabView:remarksIds">
<p:collector value="#{remarks}"
removeFrom="#{appraisalComponent.remarksListEdit}" />
</p:commandButton>
</p:column>
</p:dataTable>
</p:outputPanel>
</p:tab>
<p:tab id="tab3" title="Priority List">
<p:outputPanel id="priorityIds">
<p:dataTable id="priorityList" paginator="true" rows="5"
value="#{appraisalComponent.priorityListEdit}" var="priority"
editable="true">
<p:ajax event="rowEdit"
listener="#{appraisalComponent.updatePriority(priority)}"
update=":form:TabView:priorityList" />
<p:ajax event="rowEditCancel"
update=":form:TabView:priorityList" />
<p:column>
<f:facet name="header">
<h:outputText value="Priority Name" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{priority.prName}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{priority.prName}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:rowEditor />
<p:commandButton value="Remove"
action="#{appraisalComponent.deletePriority(priority)}"
update=":form:TabView:priorityIds"
process=":form:TabView:priorityIds">
<p:collector value="#{priority}"
removeFrom="#{appraisalComponent.priorityListEdit}" />
</p:commandButton>
</p:column>
</p:dataTable>
</p:outputPanel>
</p:tab>
<p:tab id="tab4" title="List Of Section">
<p:dataTable id="dataTable" var="sections"
value="#{appraisalComponent.sectionListToAddQues}"
paginator="true" rows="5">
<p:column>
<f:facet name="header">
<h:outputText value="Section Name :" />
</f:facet>
<h:outputText value="#{sections.secName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:commandLink value="Edit Questions"
action="#{appraisalComponent.editQuestions}">
<f:param name="sectionId" value="#{sections.secId}" />
</p:commandLink>
</p:column>
</p:dataTable>
<br></br>
</p:tab>
</p:tabView>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
What ever i given in top that is correct, but problem with java method.
to delete, i given one java method " action="#{appraisalComponent.deleteSection(appraisalComponent.selectedSec)}" "
In java that is returning one value like below
public String deleteSection (int secId) {
String temp ;
// some code
return temp;
}
But we should provide only void method like below
public void deleteSection (int secId) {
}
I changed this now my code working fine.
Any way thanks. :)
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'm using JSF 2.8 and primefaces 6.0 i have a datatable with 2 actions update and delete. and i have a popup which contains a form with required fields displayed by clicking on the create button.
but when i click on the button delete on datatable the line is not deleted and and a message appears that contains the attributes (of the popup) should'nt be null.
But when i remove required from inputs it works.
While it's an action to delete the line has nothing to do with my form.
Here is my XHTML
<ui:composition 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"
template="/WEB-INF/template.xhtml">
<ui:define name="title">Test</ui:define>
<ui:define name="content">
<h:form id="form">
<div class="ui-g">
<div class="ui-g-12">
<div class="card card-w-title">
<h1>Ressource</h1>
<p:commandButton update=":form:nouvelleRessource" value="Create" oncomplete="PF('createDialog').show()" icon="ui-icon-add" title="Create"/>
<p:commandButton value="Import" icon="ui-icon-import-export" title="Create"/>
<p:dataTable var="ressource" value="#{ressourceBean.ressources}" paginator="true" rows="5" selectionMode="single" reflow="true"
rowKey="#{ressource.idt_ressource}" id="ut" editable="true" emptyMessage="Aucune ressource trouvée">
<f:facet name="header">
Listes des ressources
</f:facet>
<p:ajax event="rowEdit" listener="#{ressourceBean.onEdit}" />
<p:ajax event="rowEditCancel" listener="#{ressourceBean.onCancel}" />
<p:column headerText="Id" filterBy="#{ressource.idt_ressource}" filterMatchMode="contains" filterOptions="">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{ressource.idt_ressource}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{ressource.idt_ressource}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Nom" filterBy="#{ressource.nom}" filterMatchMode="contains">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{ressource.nom}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{ressource.nom}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="prenom" filterBy="#{ressource.prenom}" filterMatchMode="contains" >
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{ressource.prenom}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{ressource.prenom}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Matricule" filterBy="#{ressource.matricule}" filterMatchMode="contains">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{ressource.matricule}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{ressource.matricule}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Mail" filterBy="#{ressource.mail}" filterMatchMode="contains">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{ressource.mail}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{ressource.mail}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Modifier" >
<p:rowEditor/>
</p:column>
<p:column headerText="Supprimer" >
<center>
<p:commandButton action="#{ressourceBean.delete(ressource)}" icon="ui-icon-delete" update="#ut" ajax="false"/>
</center>
</p:column>
</p:dataTable>
<p:dialog header="Nouvelle ressource" widgetVar="createDialog" modal="true">
<p:panel id="nouvelleRessource" header="Create Ressource">
<p:panelGrid columns="4" columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4" layout="grid" styleClass="ui-panelgrid-blank form-group" style="border:0px none; background-color:transparent;">
<p:outputLabel for="nom1" value="Nom"/>
<h:panelGroup styleClass="md-inputfield">
<p:inputText id="nom1" value="#{ressourceBean.ressource1.nom}" required="true" />
<p:message for="nom1" display="icon" />
<label>nom</label>
</h:panelGroup>
<p:outputLabel for="mail1" value="Mail"/>
<h:panelGroup styleClass="md-inputfield">
<p:inputText id="mail1" value="#{ressourceBean.ressource1.mail}"
requiredMessage="Please enter your email address."
validatorMessage="Invalid email format"
required="true">
<f:validateRegex
pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
</p:inputText>
<label>Mail</label>
</h:panelGroup>
<p:outputLabel for="prenom1" value="Prenom"/>
<h:panelGroup styleClass="md-inputfield">
<p:inputText id="prenom1" value="#{ressourceBean.ressource1.prenom}" required="true" />
<p:message for="prenom1" display="icon" />
<label>prenon</label>
</h:panelGroup>
<p:outputLabel for="telephone1" value="Telephone"/>
<h:panelGroup styleClass="md-inputfield">
<p:inputText id="telephone1" value="#{ressourceBean.ressource1.telephone}" required="true" />
<p:message for="telephone1" display="icon" />
<label>Telephone</label>
</h:panelGroup>
<p:outputLabel for="matricule1" value="Matricule"/>
<h:panelGroup styleClass="md-inputfield">
<p:inputText id="matricule1" value="#{ressourceBean.ressource1.matricule}" required="true"/>
<p:message for="matricule1" display="icon" />
<label>Matricule</label>
</h:panelGroup>
<p:outputLabel for="date1" value="Date d'entree"/>
<h:panelGroup styleClass="md-inputfield">
<p:calendar id="date1" value="#{ressourceBean.ressource1.dateEntree}" required="true"/>
<p:message for="date1" display="icon" />
<label>Matricule</label>
</h:panelGroup>
</p:panelGrid>
<p:commandButton icon="ui-icon-save" actionListener="#{ressourceBean.save}" onclick="PF('createDialog').hide()" value="Save" update="ut" ajax="false" style="display:inline-block;margin-top:5px"/>
<p:commandButton icon="ui-icon-cancel" update="ut" onclick="PF('createDialog').hide()" value="Cancel" />
</p:panel>
</p:dialog>
<p:commandButton update=":form:nouvelleRessource" value="Create" oncomplete="PF('createDialog').show()" icon="ui-icon-add" title="Create"/>
<p:commandButton value="Import" icon="ui-icon-import-export" title="Create"/>
</div>
</div>
</div>
</h:form>
</ui:define>
Use the process attribute:
<p:ajax process="#form" update="...>
Because the <p:ajax process> and <f:ajax execute> defaults to #this and the modifications won't be executed.
I couldnt find a solution for this issue for 1 day.
When I click to close button on dialog, it does nothing.
I tried to add modal="false" then It works. But in my situation it should be modal="true",
to prevent user to click anywhere else on screen. What did I wrong?
Thanks for your time.
<ui:composition template="/pages/admin/admin.xhtml"
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">
<ui:define name="center">
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:dataTable id="basicDT" var="user" value="#{userSelectionViewMB.users}">
<f:facet name="header">
<p:outputLabel value="#{menu['menu.admin.updateuser.list']}"/>
</f:facet>
<p:column headerText="#{menu['menu.admin.createuser.id']}">
<h:outputText value="#{user.id}" />
</p:column>
<p:column headerText="#{menu['menu.admin.createuser.name']}">
<h:outputText value="#{user.name}" />
</p:column>
<p:column headerText="#{menu['menu.admin.createuser.surname']}">
<h:outputText value="#{user.surname}" />
</p:column>
<p:column headerText="#{menu['menu.admin.createuser.grade']}">
<h:outputText value="#{user.grade}" />
</p:column>
<p:column style="width:32px;text-align: center">
<p:commandButton update=":form:userDetail" oncomplete="PF('userDialog').show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{user}" target="#{userSelectionViewMB.selectedUser}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="User Info" widgetVar="userDialog" modal="true" showEffect="fade" closable="true"
closeOnEscape="true" hideEffect="fade" resizable="false">
<p:outputPanel id="userDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty userSelectionViewMB.selectedUser}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{userSelectionViewMB.selectedUser.id}" />
<h:outputText value="Name" />
<h:outputText value="#{userSelectionViewMB.selectedUser.name}" />
<h:outputText value="Surname:" />
<h:outputText value="#{userSelectionViewMB.selectedUser.surname}" />
<h:outputText value="Grade" />
<h:outputText value="#{userSelectionViewMB.selectedUser.grade}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>
I've tried this code:
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:commandButton update=":form:userDetail" oncomplete="PF('userDialog').show()" icon="ui-icon-search" title="View">
</p:commandButton>
<p:dialog header="User Info" widgetVar="userDialog" modal="true" showEffect="fade" closable="true" closeOnEscape="true" hideEffect="fade" resizable="false">
<p:outputPanel id="userDetail" style="text-align:center;">
<h:outputText value="Id:" />
<h:outputText value="1" />
<h:outputText value="Name" />
<h:outputText value="Mister" />
<h:outputText value="Surname:" />
<h:outputText value="Brown" />
<h:outputText value="Grade" />
<h:outputText value="first" />
</p:outputPanel>
</p:dialog>
</h:form>
and it works great! maybe the problem isn't the code that you posted. Did you check if there is any javascript error in your page?
I've problem with updating dataTable, after some operations. For example, when I try add new user by New User button, i can't add second one, beacause button is "inactive". I try update="dataTable" and update=":form:dataTable", without succes. Can somebody tell me what i'm doing wrong?
<ui:composition template="../adminTemplates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h:form id="form" prependId="false">
<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" 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" />
<f:facet name="header">
Students
</f:facet>
<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">
<h:outputText value="#{user.username}" />
</p:column>
<p:column sortBy="userDescription" filterBy="userDescription"
headerText="Faculty">
<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>
<p:dialog header="Create New User" widgetVar="newUserDialog"
resizable="false" id="newUserDlg">
<h:form id="newUserForm">
<p:messages autoUpdate="true" />
<p:panelGrid id="displayNewUser" columns="2" cellpadding="4"
style="margin:0 auto;">
<h:outputText value="Name :"></h:outputText>
<p:inputText id="name" value="#{userMB.name}" required="true"
requiredMessage="Please Enter Name"
validatorMessage="Name is too short!">
<f:validateLength minimum="2"></f:validateLength>
</p:inputText>
<h:outputText value="Surname :"></h:outputText>
<p:inputText id="Surname" value="#{userMB.surname}" required="true"
requiredMessage="Please Enter Surname!"
validatorMessage="Surname is too short!">
<f:validateLength minimum="2"></f:validateLength>
</p:inputText>
<h:outputText value="Index_num :" />
<p:inputText id="indexx" value="#{userMB.username}" required="true"
requiredMessage="Please Enter Index Number"
validatorMessage="Index Number should have 6 numbers!">
<f:validateLength minimum="6" maximum="6" />
<f:validateRegex pattern="^[0-9]+$" />
</p:inputText>
<h:outputText value="PESEL :"></h:outputText>
<p:inputText value="#{userMB.password}" required="true"
requiredMessage="Please Enter PESEL!"
validatorMessage="PESEL should have last 5 numbers!">
<f:validateLength minimum="5" maximum="5" />
<f:validateRegex pattern="^[0-9]+$" />
</p:inputText>
<h:outputText value="User Description :"></h:outputText>
<p:inputText value="#{userMB.userDescription}" required="true"
requiredMessage="Please Enter User Description" />
<f:facet name="footer">
<p:commandButton value="Submit" actionListener="#{userMB.addUser}"
oncomplete=" handleSubmitRequest(xhr, status, args, 'newUserDlg','newUserForm');"
update=":form:dataTable, :growl" validateClient="true" />
<p:commandButton type="reset" value="Reset"></p:commandButton>
</f:facet>
</p:panelGrid>
</h:form>
</p:dialog>
<p:growl id="growl" showDetail="true" life="5000" />
<script type="text/javascript">
function handleSubmitRequest(xhr, status, args, dialogName,
formName) {
dialog = jQuery('#' + dialogName);
if (args.validationFailed) {
dialog.effect("shake", {
times : 3
}, 100);
} else {
clearForm(formName);
newUserDialog.hide();
userDialog.hide();
}
}
function clearForm(formName) {
jQuery('#' + formName).each(function() {
this.reset();
});
}
</script>
</ui:define>
</ui:composition>
Change the code as
<f:facet name="footer">
<p:commandButton value="New User" onclick="newUserDialog.show()"
icon="ui-icon-star" title="Creates new user" />
</f:facet>
Updated::
I have a similar implementation I am sharing what I did, I can't find your fault.
<p:commandButton ajax="false" update=":ff1:actDetails:lis"
oncomplete="handleComplete(xhr, status, args)" value="Submit" actionListener="#{insertbean.insert()}" type="submit" />
actionListener signature should not be like this actionListener="#{userMB.addUser}" should be like actionListener="#{userMB.addUser()}"
My javascript is
function handleComplete(xhr, status, args) {
if (!args.validationFailed) {
dlg1.hide();
} else {
}
}
dlg1 is the dialog widgetVar. Form inside dialog has also validation like required=true type but my dialog doesn't have any animation.
3. I made ajax="false" because ajax="true" wasn't updating the datatable new entry.
4. My add new button is
<f:facet name="footer">
<p:commandButton value="Add Activity" type="button" onclick="dlg1.show()" />
</f:facet>
May it help.
My xhtml, If i put my CommandButton into the h:form the Actionlistener is not called:
<ui:composition template="/template.xhtml">
<style>
</style>
<ui:define name="title">
<h:outputText value="#{bundle.ListDashboardTitle}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form id="formDashboard">
<p:layout id="layoutVar" style="min-height:500px;">
<p:layoutUnit id="gridLeft" position="west" size="250" style="position:absolute;">
<p:fieldset style="padding:0;padding-top:5px">
<f:facet name="legend" id="legendId">
<p:commandButton id="addEvent" type="button" icon="ui-icon-plus" value="" onclick="addMemo.show()" update=":formAddMemo" style="width:30px;height:30px;"/>
</f:facet>
<p:dataGrid id="leftData" var="item" columns="1" value="#{myMemosController.items}" style="border:none;">
<p:panel id="pnl" styleClass="" style="background-color:#{item.priority}}" closable="true">
<!-- <p:ajax event="close" listener=""/>-->
<f:facet name="header">
<h:panelGroup>
<h:outputText value="#{item.name}" styleClass=""/>
<p:commandButton icon="ui-icon-pencil" actionListener="#{myMemosController.prepareEdit}" update=":editForm" onclick="editMemo.show();" style="width:19px;height:19px;"/>
</h:panelGroup>
</f:facet>
<f:facet name="footer">
<h:outputText value="#{item.date} at #{item.time}" styleClass="footerStyle"/>
</f:facet>
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{item.comments}" styleClass=""/>
</h:panelGrid>
</p:panel>
<p:draggable for="pnl" helper="clone" handle=".ui-panel-titlebar" stack=".ui-panel" zindex="100"/>
</p:dataGrid>
</p:fieldset>
</p:layoutUnit>
<p:layoutUnit position="center" style="position:absolute;">
<p:outputPanel id="dropArea">
<p:dataTable id="centerGrid" value="#{dashboardController.items}" var="item">
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Priority"/>
</f:facet>
<h:outputText value="#{item.priorityname}"/>
</p:column>
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{item.name}"/>
</p:column>
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Comment"/>
</f:facet>
<h:outputText value="#{item.comments}"/>
</p:column>
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Time"/>
</f:facet>
<h:outputText value="#{item.time}"/>
</p:column>
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Date"/>
</f:facet>
<h:outputText value="#{item.date}"/>
</p:column>
</p:dataTable>
</p:outputPanel>
<p:droppable id="droppablePanel" tolerance="touch" activeStyleClass="ui-state-highlight">
</p:droppable>
</p:layoutUnit>
<p:layoutUnit id="gridRight" position="east" size="250" style="position:absolute;">
<p:dataGrid id="rightGrid" var="item" columns="1" value="#{usersMemosController.items}">
<p:panel id="pnl" styleClass="" style="background-color:#{item.priority}}" closable="true">
<f:facet name="header">
<h:outputText value="#{item.name}" styleClass=""/>
</f:facet>
<f:facet name="footer">
<h:outputText value="#{item.date} at #{item.time}" styleClass="footerStyle"/>
</f:facet>
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{item.comments}" styleClass=""/>
</h:panelGrid>
</p:panel>
<p:draggable for="pnl" helper="clone" handle=".ui-panel-titlebar" stack=".ui-panel" zindex="100"/>
</p:dataGrid>
</p:layoutUnit>
</p:layout>
</h:form>
<p:dialog id="dialogEditMemo" header="Edit Memo" widgetVar="editMemo" resizable="false" closable="true" closeOnEscape="true" draggable="false">
<h:form id="editForm">
<h:messages style="color:red;margin:8px;" />
<h:panelGrid columns="1" cellpadding="3">
<p:inputTextarea id="commentEditInput" value="#{myMemosController.currentComment}" rows="6" required="true">
<p:ajax event="keyup" />
<p:ajax event="change" />
</p:inputTextarea>
<p:watermark for="commentEditInput" value="Enter your memo..."/>
<h:panelGrid columns="2" cellpadding="1">
<h:outputLabel for="selectEditShare" value="Share Memo: " style="margin-right:40px;"/>
<p:selectBooleanCheckbox id="selectEditShare" label="selectEditShare"/>
</h:panelGrid>
<p:selectOneMenu id="chooseEditPriority" value="#{myMemosController.currentPriority}">
<f:selectItem itemLabel="Low Priority" itemValue="Low Priority" />
<f:selectItem itemLabel="Medium Priority" itemValue="Medium Priority" />
<f:selectItem itemLabel="High Priority" itemValue="High Priority" />
</p:selectOneMenu>
</h:panelGrid>
</h:form>
<p:panel id="panelEditBtn" style="border:none;">
<p:commandButton icon="ui-icon-close" value="Reset" type="reset"/>
<p:commandButton icon="ui-icon-check" actionListener="#{myMemosController.update}" value="Edit" process="#this" update=":formDashboard:leftData" onsuccess="editMemo.hide();"/>
</p:panel>
</p:dialog>
</ui:define>
</ui:composition>
When i want to display InputTextarea value is equal null:
public String update() {
System.out.println(getCurrentComment());
}
Thanks in advance
The problem is in your managedBean you have not instansiated the object currentComment .
And Please try to avoid nested form in your application.
I have gone with the same issue the issue is that sometime value is not set to the managedBean by ajax. So modify your <p:inputTextArea /> with the below code it works.
<p:inputTextarea id="commentEditInput"
value="#{myMemosController.currentComment}"rows="6" required="true">
<p:ajax event="keyup" />
<p:ajax event="change" />
</p:inputTextarea>
And For your actionListener just try to use process attribute that might work..
<p:commandButton id="submitEditDialog" icon="ui-icon-check"
actionListener="#{myMemosController.update}" value="Edit"
update=":formDashboard:leftData :editForm" onsuccess="editMemo.hide();"
process="#this"
/>