popup disappear even when validation failed - jsf-2

I am working with primefaces 3.5 and jsf2.I have a command Button that shows up a dialog as a popup to register a new customer. All fields are required. when i submit the form with missing some fields the popup disappears as if nothing happened. And when i click again on the button new it shows up the last filled form with error messages.
I need this to be shown first time i submit when validation is failed.
Here is a short version of my html code
<h:form id="mainForm">
<p:panel id="datatablePanel">
.........
<p:commandButton style="width: 8%;height: 100%" id="newButton" value="New" oncomplete="customerDialogNew.show()" icon="ui-icon-star"/>
</p:panel>
</:form>
<h:form id="newCustomerForm">
<p:panel id="customerPannel">
<p:dialog draggable="true" header="New Customer" widgetVar="customerDialogNew" id="dialog2">
<p:panelGrid id="newCustomer" columns="6" >
<p:outputLabel value="Name:" for="name" />
<p:inputText id="name" value="#{customerMB.name}" title="Name" required="true" requiredMessage="The Name field is required."/>
<p:message for="name" />
......
<p:commandButton style="height: 100%;width: 15%" value="Cancel" update="customerPannel" icon="ui-icon-arrowrefresh-1-n" process="#this" oncomplete="customerDialogNew.show()" />
<p:commandButton ajax="false" style="height: 100%;width: 15%" value="Save" icon="ui-icon-circle-check" styleClass="ui-priority-primary" actionListener="{customerMB.addCustomer()}"/>
</p:dialog>
</p:panel>
</h:form>

Cancel Button:
Change oncomplete="customerDialogNew.show()" to
oncomplete="customerDialogNew.hide()".
Save Button:
Remove ajax=false.
Add update="newCustomer".
So your Buttons looks like:
<p:commandButton style="height: 100%;width: 15%" value="Cancel" update="customerPannel" icon="ui-icon-arrowrefresh-1-n" process="#this" oncomplete="customerDialogNew.hide()" />
<p:commandButton style="height: 100%;width: 15%" value="Save" icon="ui-icon-circle-check" styleClass="ui-priority-primary" actionListener="#{customerMB.addCustomer()}" update="newCustomer"/>
Backing Bean:
public void addCustomer(){
//do something
System.out.println(name+"");
//set name to null to prevent seeing old value when adding the second(or more) customer
name=null;
//Hide customerDialogNew if everything done.
RequestContext.getCurrentInstance().execute("customerDialogNew.hide()");
}

Related

displaying the input value on confirm dialog returned null

I am working on j2ee6 project that extract emails from the web browserrs.
I have a command Button that calls the extraction method after the user entered the emails number. Once the extraction is completed a confirm dialg shows up and displaying the number of emails extracted. Here is my xhtml code:
<h:form id="mainform">
<p:panel id="panelform" header="Email Extractor" >
<h:panelGrid id="formulaire" columns="2">
<h:panelGroup id="formblock" layout="block" >
<p:panelGrid columns="2">
<p:outputLabel for="Emailsnbr" value="Enter the emails'number:" />
<p:inputText id="Emailsnbr" type="number" requiredMessage="Emails number is required"
value="#{mailMB.number}" required="true" label="Emailsnbr">
</p:inputText>
</p:panelGrid>
</h:panelGroup>
</h:panelGrid>
<p:commandButton value="Extract" style="width: 12%;height: 100%" update="tableemails, :confirmPurchase, :confirmPurchaseTest, :mainform" id="extractbutton" ajax="true" widgetVar="ButtonExtract"
actionListener="#{mailMB.searchEmails()}"
icon="ui-icon-disk" styleClass="ui-priority-primary"
onstart="blockUIWidget1.show();" oncomplete=" blockUIWidget1.hide(); if (args && !args.validationFailed) freeMails();" />
<p:dialog widgetVar="blockUIWidget1" modal="true" closable="false" >
<h:panelGrid columns="2">
<p:graphicImage url="pictures/loading_bar.gif" width="264" height="34" alt="animated-loading-bar"/>
<h:outputText value="Please wait..." style="white-space: nowrap;"/>
</h:panelGrid>
</p:dialog>
</p:panel>
</h:form>
<p:confirmDialog closable="false" style="position: absolute; width: 50px; border-color: blue" id="confirmPurchaseTest" message="Your Database was successfully created. And contains #{mailMB.number} Emails "
appendToBody="true"
header="Get Emails List" severity="info" widgetVar="emailsList">
<h:form>
<p:commandButton id="getEmails" style="width: 30%;height: 100%" value="Get Emails" oncomplete="window.location.href = '/Hitonclick/emailsList.xhtml'" >
<f:event type="preRenderView" listener="#{mailMB.preRender}"/>
</p:commandButton>
<p:commandButton id="declineTest" style="width: 30%;height: 100%" value="Decline" onclick="deleteDialog.show();" />
</h:form>
Every thing works fine if i enter a small number. But if i enter a big number for exemple 600, the extraction time becomes long (it's logic have no problem with this) and the number displayed on the confirm dialog is 0 although the emails are successfully extracted when i checked them from the db. Is it related to ajax or what??
How can i fix this?

Modal dialog not working correctly

I'm working on a JSF/Primefaces application. I want to prevent page behind a primefaces dialog. I tried this code:
<h:form id="form">
<p:dataTable id="types" value="#{resourcesTypesMBean.resourceTypes}" var="item"
selection="#{resourcesTypesMBean.selectedResourceType}"
rowKey="#{item.id}" selectionMode="single">
<f:facet name="header" >
<table style="border: hidden">
<tbody >
<tr >
<td align="left" style="border: hidden">
<p:outputLabel value="List of Resources' Types"/>
</td>
<td align="right" style="border: hidden">
<p:commandButton
oncomplete="ResourceTypeDialogNew.show()"
icon="ui-icon-plus" title="add"/>
<p:commandButton id="btnDelete" title="delete
" actionListener="#{resourcesTypesMBean.deleteResourceType()}"
update="types" icon="ui-icon-trash" />
<p:button outcome="Resources.xhtml"
icon="ui-icon-arrowthick-1-w" title="back"/>
</td>
</tr>
</tbody>
</table>
</f:facet>
<p:column headerText="Name">
<p:outputLabel value="#{item.name}"/>
</p:column>
<p:column headerText="Code">
<p:outputLabel value="#{item.code}"/>
</p:column>
</p:dataTable>
</h:form>
<h:form id="newResourceTypeForm">
<p:dialog header="New Resource Type" widgetVar="ResourceTypeDialogNew"
resizable="false" modal="true" appendTo="#(body)" showEffect="explode"
hideEffect="explode" style="position: absolute ;"
id="dialogNewResourceType">
<p:panel id="panel">
<p:messages id="messages" />
<p:panelGrid id="newResourceType" columns="2" style="margin-bottom:10px">
<f:facet name="header">
<p:graphicImage value="/images/resource.png"/>
</f:facet>
<p:outputLabel value="Name" for="name"/>
<p:inputText id="name" value="#{resourcesTypesMBean.name}"
required="true" requiredMessage="The Name field is required." />
<p:outputLabel value="Code" for="code"/>
<p:inputText id="code" value="#{resourcesTypesMBean.code}"
required="true" requiredMessage="The Code field is required." />
</p:panelGrid>
<div align="right" >
<p:commandButton value="Save" style="margin-right: 5px" icon="ui-
icon-circle-check" oncomplete=" handleSubmitRequest(xhr, status,
args, 'ResourceTypeDialogNew','newResourceTypeForm');"
actionListener="#{resourcesTypesMBean.addResourceType()}"
update=":form:types, :growl" />
<p:commandButton value="Cancel"
oncomplete="ResourceTypeDialogNew.hide();"
icon="ui-icon-arrowrefresh-1-n" styleClass="ui-priority-primary"/>
</div>
</p:panel>
</p:dialog>
</h:form>
When the dialog is shown, the page behind is blocked but save and cancel buttons are not working correctly and the user is automatically logged out from the application.
I need your help.
Update: without modal="true" appendTo="#(body)" it works correctly (both save and cancel buttons).
Can't check the solution life now, but the following looks suspicious:
When you check the rendered XHTML-code (e.g. through Firebug in Firefox), you might recognize that the form newResourceTypeForm is actually empty. With the appendTo="#body", I guess, the dialog panel is attached directly to thebody` - element, and through this is outside any formular. This prevents the buttons inside of work.
Either move the form into the p:dialog, or
try dropping appendTo
try a rewrite appendTo="#form"
Hope one of that might help you go forward, and if - upvotes appreciated - ...

Updating PrimeFaces datatable row from a dialog

I have a datatable that has a rowexpandor inside which contains two panels one is regular text and one holds a list of comments. I have a button that allows users to add new comments. Now that dialog is in a separate form see code below. My problem is that once the comment has been added the panel that holds all comments is not being refreshed. Here is a code sample.
<h:form id="formName">
<p:dataTable id="prTable" rowIndexVar="index" sortMode="multiple" styleClass="iris_table" var="value" value="#{bean.listValues}"
paginator="true" rows="10" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:ajax event="rowToggle" onstart="rowMutalExclusive();"/>
<p:column style="width:2%">
<p:rowToggler />
</p:column>
<p:column id="message"
headerText="Description"
filterMatchMode="contains" filterStyle="display: none;">
<h:outputText value="#{value.description}" />
</p:column>
<p:column id="deadline" headerText="Deadline" filterStyle="display: none;">
<h:outputText value="#{value.endDate}">
<f:convertDateTime pattern="dd.MM.yyyy " />
</h:outputText>
</p:column>
<p:rowExpansion >
<div class="iris_peerreview_details">
<div class="comments">
<p:commandButton value="Comment" process="#this" update=":dialogForm:commentDlg" oncomplete="commentDialog.show()">
<f:setPropertyActionListener target="#{bean.review}" rendered="check" value="#{value.review}"></f:setPropertyActionListener>
</p:commandButton>
<div class="clear"></div>
</div>
<p:panel id="pnlHelp" style='border:none'>
<p:dataList id="check" rowIndexVar="index" value="#{bean.commentsFromCase(value.review)}" var="commentReview">
<div class="messages">
<p>
<h:outputText value="#{commentReview.date}">
<f:convertDateTime pattern="MM.dd.yyyy 'at' h:mm a"></f:convertDateTime>
</h:outputText>
</p>
<p class="message">
<h:outputText styleClass="message" value="#{commentReview.comment}"/>
</p>
</div>
</p:dataList>
</p:panel>
</div>
</p:rowExpansion>
</p:dataTable>
</h:form>
<h:form id="dialogForm" >
<p:dialog id="commentDlg" header="Comment" widgetVar="commentDialog" resizable="false"
modal="true">
<h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
<h:outputText value="Comment"" />
<h:inputText value="#{bean.comment}" required="true" requiredMessage="Please enter a comment" style="font-weight:bold"/>
<p:commandButton id="save" actionListener="#{bean.commentCase()}" update=":formName:prTable:pnlHelp" oncomplete="commentDialog.hide();"
value="Comment"/>
<p:commandButton id="cancelButton" onclick="commentDialog.hide()" value="Cancel"/>
</h:panelGrid>
</p:dialog>
</h:form>
You have to excuse me as i had to remove some code and mask some of it but generally this is what it does. Now once the comment button is clicked the dialog appears and the comment is store in the db and everything works well but i cannot get it to update the panel of that row that holds the comment.
The problem i am guessing is the following once this page its rendered the panel id is actually
formName:prTable:0:pnlHelp
and the value changes for each row. Now i understand that my update in the dialog is not able to locate the id but if i enter the index and try to create this specif id on render it throws an exception that it cannot be found.
I have attempted by placing the dialog inside the dataTable and than it works ok with updating but it causes many more problems, so i had to drop that option. Also if i update the full table it ok but the problem is that the rowexpandor closes which is not what its required, plus it not really don't like refreshing the full table as that is not the purpose of this. I am using Primeface 4.0 if this helps. With jsf 2.0.
Yes, the value of id changes for every row. Try to update it with a css selector, changing your button to
<p:commandButton id="save" actionListener="#{bean.commentCase()}" update="#([id$=pnlHelp])" oncomplete="commentDialog.hide();"
value="Comment"/>
The code will update all components ending with "pnlHelp". More info: http://www.w3schools.com/cssref/css_selectors.asp

How to process primefaces dialog

I have a primefaces dialog and what I want to do is process inputtext before commandbutton action starts. Inside myController.sendToPostBox method, myController.rejectionReason string returns null. Here is my view code.When I remove process attribute, commandbutton doesn't works.
<h:form>
....
<p:dialog id="myPanel"
widgetVar="myPanelId"
resizable="true"
appendToBody="true"
draggable="true"
height="200"
width="300">
<p:panelGrid id="myPanelGridId" style="width: 250px;" styleClass="panelGridWithoutBorder">
<p:row>
<p:column colspan="2">
<p:inputTextarea style="width: 250px;" value="#{myController.rejectionReason}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:commandButton value="Save"
oncomplete="if (!args.validationFailed) myPanel.hide();"
process="myPanelId"
action="#{myController.sendToPostBox()}"/>
</p:column>
<p:column>
<p:commandButton value="Close" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</h:form>
Just place the <h:form> inside the dialog (instead dialog inside the <h:form>)
Explanation:
When you use appendToBody="true" you dialog is being transferred outside of the form that wraps it to the body of the generated html , and since there is no form inside the dialog you can't really submit it.
Also take a look at this thread: Proper Construct for Primefaces Dialog
You need something like this:
<h:form id="formDialog">
<p:commandButton id="basic" value="Basic Dialog" onclick="PF('dlg1').show();" type="button" />
</h:form>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:form id="formUser">
<h:panelGrid id="grid" columns="2">
<h:outputLabel value="Username:" />
<p:inputText id="user" value="#{user.name}" />
<h:outputLabel value="Password:" />
<p:inputText id="password" value="#{user.password}" />
<h:commandButton value="Login" id="btn" process="#formUser" actionListener="#{user.login}" />
</h:panelGrid>
</h:form>
</p:dialog>
"login" in the actionListener tag is a method in the User(bean) class, that needs the #ManagedBean annotations.

Primefaces popup dialog not working

I have a jsf page having a popup button that opens a following dialog popup:
</h:form>
<p:dialog id="dialog" header="Select different user"
widgetVar="dlg" appendToBody="true">
<h:form id="form23">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{loginBean.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login" />
</f:facet>
</h:panelGrid>
</h:form>
</h:form>
But instead of opening as popup it is getting displayed outside the page itself. the dialog is outside the main form. Help!!
I tried that but still the same problem persists..below is my modified code..
<h:form id="create-ticket">
<p:dialog id="dialog" header="Select different user" widgetVar="dlg" appendToBody="true">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{loginBean.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login"
/>
</f:facet>
</h:panelGrid>
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton"> <!-- This is the section where we get the grey background -->
<h:panelGroup id="input_search_section" styleClass="">
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show();" type="button"
>
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
Now i only have one form you can see the popup dialog section + the button which is calling the popup under h:panelgroup.Atached is the image how the form currently looks Thanks in advance
You need to restructure your code.
*Don't nest forms inside other forms.
*You dont have the end-tag of your p:dialog.
<h:form>
<p:dialog id="dialog" header="Select different user"
widgetVar="dlg" appendToBody="true">
//Content ex inputtext
</p:dialog>
<p:commandButton value="Show Dialog" onclick="dlg.show();" type="button" />
</h:form>

Resources