I tried many things for this workaround, but now I found a issue with p:dialog.
If I use modal="false" everything works fine.
But if I use modal="true" and appendTo="#(body)" and want to use a footer the p:dialog doesnt work.
The h:form doesn´t validate the fields.
<p:dialog message="Add Ticket" header="Add Ticket"
draggable="true" resizable="true" closeOnEscape="true"
appendTo="#(body)" modal="true" widgetVar="addTicketReportingDialog">
<h:form id="addTicketReportingForm">
<h:panelGrid id="ticketReportingAddPanelGrid" columns="2">
<p:outputLabel for="ticketReporting_name" value="Name:" />
<p:inputText id="ticketReporting_name" size="33" required="true"
requiredMessage="Please add a value"
value="#{ticketReportingEditController.ticketReporting.title}" />
</h:panelGrid>
<br></br>
<f:facet name="footer">
<p:commandButton value="Save"
oncomplete="if (!args.validationFailed) addTicketReportingDialog.hide()"
update=":ticketReportingListForm:ticketReportingListDatatable,messagesAddTicketReporting,:addTicketReportingForm:ticketReportingAddPanelGrid"
actionListener="#{ticketReportingEditController.doSave}"
ajax="true" />
<h:outputText value=" or " />
<p:commandLink ajax="true" process="#this"
onclick="addTicketReportingDialog.hide();">
<h:outputText value="Close" />
</p:commandLink>
<p:messages id="messagesAddTicketReporting" showDetail="false"
for="messagesAddTicketReporting" autoUpdate="false"
closable="true" />
</f:facet>
</h:form>
</p:dialog>
Related
How I can edit data in form? I have this Primefaces dialog which hI wants to use to edit data.
<p:dialog header="System User Details" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty systemusers.selectedSystemUser}" columnClasses="label,value">
<h:outputText value="Username" />
<h:outputText value="#{systemusers.selectedSystemUser.username}" />
<h:outputText value="Last Login" />
<h:outputText value="#{systemusers.selectedSystemUser.lastLogin}" />
.........
<h:outputText value="Action" />
<h:outputText value="Download Delete" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
Firstly you would need to have an <h:form /> component inside of the <p:dialog /> component tags. You would also need to change the outputText components to that of inputText.
You could use a <p:commandButton to confirm and persist the input. For example:
<p:dialog header="System User Details" widgetVar="carDialog" modal="true" appendTo="#body">
<h:form id="dialogForm">
<p:outputLabel for="username" value="Username">
<p:inputText id="username" value="#{systemusers.selectedSystemUser.username}" required="true" requiredMessage="Value is required" label="Username" />
....
<p:commandButton value="Submit" update=":mainForm" actionListener="#{beanName.updateData}" oncomplete="PF('cardDialog').hide()" />
<p:commandButton value="Cancel" type="button" onclick="PF('cardDialog').hide()" />
</h:form>
</p:dialog>
i have two p:commandLink:
<p:commandLink update=":form:livreDetail" oncomplete="PF('livreDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
<p:commandLink update=":form:ajoutPanel" oncomplete="if(#{ empty loginBean.c }){PF('connectDialog').show()}else {PF('ajoutLivrePanier').show()} " title="ajouter au panier">
<h:outputText styleClass="ui-icon ui-icon-cart" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
The first p:commandLink one is showing and updating the content of livreDialog p:dialog.
The second p:commandLink should show connectDialog p:dialog when loginBean.c property is null, and ajoutLivrePanier p:dialog when is not.
my code works correctly when the loginBean property is null. But when is not it gives strange results:
When i click the first p:commandLink it only shows the livreDialog p:dialog without updating it's content. Also the validation message of the connectDialog p:dialog is shown up. it is weird !!
When i click the second p:commandLink only the validation message of connectDialog p:dialog is shown up, Weird too !!
Here is the hole code:
<p:messages globalOnly="true" autoUpdate="true" showDetail="false"/>
<h:form id="form">
<p:dataGrid var="livre" value="#{livreListBean.livresList}" columns="3"
rows="12" paginator="true" id="livres"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16">
<f:facet name="header">
Livres
</f:facet>
<p:panel header="#{livre.titre}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{livre.auteur}" />
<h:outputText value="#{livre.datePublication}" />
<p:commandLink update=":form:livreDetail" oncomplete="PF('livreDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
<p:commandLink update=":form:ajoutPanel" oncomplete="if(#{ empty loginBean.c }){PF('connectDialog').show()}else {PF('ajoutLivrePanier').show()} " title="ajouter au panier">
<h:outputText styleClass="ui-icon ui-icon-cart" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{livre}" target="#{livreDataGridView.selectedLivre}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:dataGrid>
<p:dialog header="Info Livre" widgetVar="livreDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="livreDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty livreDataGridView.selectedLivre}" columnClasses="label,value">
<h:outputText value="Titre:" />
<h:outputText value="#{livreDataGridView.selectedLivre.titre}" />
<h:outputText value="Auteur" />
<h:outputText value="#{livreDataGridView.selectedLivre.auteur}" />
<h:outputText value="Date de publication:" />
<h:outputText value="#{livreDataGridView.selectedLivre.datePublication}" />
<h:outputText value="Prix" />
<h:outputText value="$#{livreDataGridView.selectedLivre.prix}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<h:panelGroup id="livrePanier">
<p:dialog header="Se connecter" widgetVar="connectDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="connecterPanel" style="text-align:center;">
<h:panelGrid columns="3" >
<p:outputLabel for="mail" value="E-mail:" />
<p:inputText id="mail" value="#{loginBean.email}" required="true" requiredMessage="Vous devez entrer votre e-mail"/>
<p:message for="mail"/>
<p:outputLabel for="password" value="Password:" />
<p:password id="password" value="#{loginBean.password}" required="true" requiredMessage="Vous devez entrer votre password"/>
<p:message for="password"/>
<p:commandButton value="Se connecter" action="#{loginBean.LoginProcess()}" process="connecterPanel" update="connecterPanel"/>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
<p:dialog header="Ajouter au panier" widgetVar="ajoutLivrePanier" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="ajoutPanel" style="text-align:center;" rendered="#{not empty livreDataGridView.selectedLivre}">
<p:outputLabel value="Voulez vous ajouter ce produit au panier ?"/>
<h:panelGrid columns="2" >
<p:outputLabel value="#{livreDataGridView.selectedLivre.titre}" />
<p:outputLabel value="#{livreDataGridView.selectedLivre.prix}" />
<p:commandButton value="Oui" action="#{livreDataGridView.ajouterLivreAuPanier()}" process="connecterPanel" update="connecterPanel" oncomplete="PF('ajoutLivrePanier').hide()"/>
<p:commandButton value="Annuler" onclick="PF('ajoutLivrePanier').hide()"/>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:panelGroup>
</h:form>
i'll appreciate your help to fix the problem
You need process="#this" on your commandLinks. Without it JSF processes the whole form, that's why you see those validation failures, which in turn cause the Invoke Application phase to be skipped.
See also: Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes.
I would like to hide an element while a button triggered action is being performed:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<pe:blockUI block="input" widgetVar="blockUIWidget">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</pe:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="growl,input"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();">
</p:commandButton>
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panelGrid>
</h:form>
I tried with p:blockUI / pe:blockUI and with/without the onstart and oncomplete attributes.
What am I doig wrong ? I use blockUI somewhere else, and it is working fine:
The only difference is that the table is its own trigger.
I followed this tutorial.
Block the input seems to not work, you can wrap the input with a panel and block it.
PrimeFaces Extensions:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<pe:blockUI target="panel" widgetVar="blockUIWidget">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</pe:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="input"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();">
</p:commandButton>
<p:panel id="panel">
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panel>
</p:panelGrid>
</h:form>
PrimeFaces:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<p:blockUI block="panel" trigger="command">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</p:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="input">
</p:commandButton>
<p:panel id="panel">
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panel>
</p:panelGrid>
</h:form>
Below is my code. Here the CommandButton action is not working and always moving the first
tab.
<h:head>
<title>Alert Input</title>
</h:head>
<h:body>
<h1 style="margin: auto;text-align: center">Fraud Alert Admin Page</h1>
<p:separator style="height:5px;background-color:black;"/>
<p:tabView id="tabs">
<p:tab id="alertInput" title="Enter Alert">
<h:form>
<p:growl id="submitMessage" showDetail="true" sticky="true"/>
<p:panel id="alertPanel">
<p:panelGrid columns="2" style="margin-bottom:10px">
<p:outputLabel for="sevLevel" value="Sev:" />
<p:selectOneMenu id="sevLevel" required="true" value="#{alertInputBean.alertSev}">
<f:selectItem itemLabel="Informational" itemValue="1"/>
<f:selectItem itemLabel="Warning" itemValue="2"/>
<f:selectItem itemLabel="Urgent" itemValue="3"/>
<f:selectItem itemLabel="Severe" itemValue="4"/>
</p:selectOneMenu>
<p:outputLabel for="alertName" value="Alert Name:"/>
<p:inputText id="alertName" required="true" label="Alert Name" value="#{alertInputBean.alertName}"/>
<p:outputLabel for="alertDescription" value="Alert Description:"/>
<p:inputText id="alertDescription" required="true" label="Description" value="#{alertInputBean.alertDesc}"/>
</p:panelGrid>
<p:toolbar>
<f:facet name="left">
<p:commandButton value="submit" actionListener="#{alertInputBean.submitAlert()}"
update="submitMessage" ajax="false">
</p:commandButton>
</f:facet>
<f:facet name="right">
<h:commandButton value="Reset">
<p:ajax update="alertPanel" resetValues="true"/>
</h:commandButton>
</f:facet>
</p:toolbar>
</p:panel>
</h:form>
</p:tab>
<p:tab id="alertExisting" title="Current Alerts">
<h:form id="form">
<p:dataTable id="allAlerts" var="alerts"
value="#{alertInputBean.retrieveAllAlerts()}"
emptyMessage="No alerts found with the given criteria."
selection="#{alertInputBean.selectedAlerts}"
rowKey="#{alerts.alertName}" scrollable="true" scrollHeight="250">
<f:facet name="header">
Current Alerts
</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<p:column headerText="Alert Severity">
<h:outputText value="#{alerts.sev}"/>
</p:column>
<p:column headerText="Alert Name">
<h:outputText value="#{alerts.alertName}"/>
</p:column>
<p:column headerText="Alert Description">
<h:outputText value="#{alerts.descrption}"/>
</p:column>
<p:column headerText="Creation Date">
<h:outputText value="#{alerts.createDate}"/>
</p:column>
<p:column headerText="Modify Date">
<h:outputText value="#{alerts.modifyDate}"/>
</p:column>
<p:column headerText="Enabled">
<h:outputText value="#{alerts.enabled}"/>
</p:column>
<f:facet name="footer">
<p:commandButton process="#this" value="Update" icon="ui-icon-search"
update=":tabs:form:multiAlertUpdate" onclick="PF('multiAlertDialog')show()"/>
</f:facet>
</p:dataTable>
<p:dialog header="Update Selected" widgetVar="multiAlertDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="200">
<p:outputPanel id="multiAlertUpdate" style="text-align: center">
<ui:repeat value="#{alertInputBean.selectedAlerts}" var="sAlerts">
<p:outputLabel value="#{sAlerts.sev}-#{sAlerts.alertName}" style="display: block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
</h:form>
</p:tab>
</p:tabView>
</h:body>
Below is the XHTML
I have the above code. The problem is whenever I click on the commandbutton I am redirected to the first tab. Intended onClick is not at all working.
First Command Button
It happens because you have defined the ajax attribute as false, and you are trying to call a method with actionListener which uses an ajax call.
Set ajax=true or just delete it (the default is true), and your page may work
If you don't want ajax behavior, use action instead of actionListener
Last Command Button
If the problem is in the last command button (please be more clear in the next time), you just have to define type=button, so it will work as a simple button.
<p:commandButton type="button" process="#this" value="Update" icon="ui-icon-search"
update=":tabs:form:multiAlertUpdate" onclick="PF('multiAlertDialog')show()"/>
I have an issue with primefaces datagrid.I am trying to update the dialog box with the selected values on click of p:commandLink.
The Dialog doesnt display any values initially but it gets updated with the previously selected values when i refresh the page and click on commandLink.
I am using primefaces-2.2.1 on JBoss 4.3.0.Any help would be appreciated.
<p:column>
<p:panel header="#{loc.loc_details}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="/user/xyz/resources/images/#{loc.loc_details}.jpg"/>
<h:outputText value="#{loc.locality}" />
<h:outputText value="#{loc.city}" />
<h:outputText value="#{loc.state}" />
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}"
target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:column>
<p:dialog header="Loc Detail" widgetVar="locDialog" modal="true">
<p:outputPanel id="locDetail" style="text-align:center;" layout="block">
<h:panelGrid id="locDetailGrid" columns="2" cellpadding="5">
<h:outputLabel for="loc_details" value="Locality Details :" />
<h:outputText id="loc_details" value="#{tutorialsBean.selectedLocality.loc_details}" />
<h:outputLabel for="city" value="City: " />
<h:outputText id="city" value="#{tutorialsBean.selectedLocality.city}" />
<h:outputLabel for="state" value="State: " />
<h:outputText id="state" value="#{tutorialsBean.selectedLocality.state}" />
<h:outputText styleClass="text_normal" value="First Name" />
<p:inputText id="fnameText" value="#{tutorialsBean.firstName}" />
<h:outputText styleClass="text_normal" value="Last Name" />
<p:inputText id="lnameText" value="#{tutorialsBean.lastName}" />
<h:outputText styleClass="text_normal" value="Email" />
<p:inputText id="emailText" value="#{tutorialsBean.email}" />
<p:commandButton id="searchButton"
value="Submit" action="#{tutorialsBean.submitValues}"
styleClass="button" />
</h:panelGrid>
</p:outputPanel>
in you commandLink add the update and process attributes in your dialog to refresh the information.
like this:
Put the ID in dialog:
<p:dialog header="Loc Detail" id="locDialog" widgetVar="locDialog" modal="true">
Put the Update to dialog:
<p:commandLink update="locDetail,locDetailGrid" oncomplete="locDialog.show()" title="View Detail" border="0" update="locDialog" process="#this" ajax="true" partialSubmit="true" >
<p:graphicImage value="/user/xyz/resources/images/imagesCA6ETPOM.jpg" />
<f:setPropertyActionListener value="#{loc}" target="#{tutorialsBean.selectedLocality}" />
</p:commandLink>