When the below dialog is opened and the user hits enter it closes. I'm assuming that I need to somehow add some attribute to the below commandButton to not allow it to submit when the user hits enter. Any idea?
<p:dialog header="#{bundle['dreamSearch.HEADER']}"
widgetVar="webSearchDlg" modal="true" styleClass="dialog dialog2"
draggable="false" resizable="false" showEffect="fade"
hideEffect="fade">
<h:form id="dreamWebSearchFrm">
<div class="dialog-top-reg"></div>
<div class="dialog-middle-reg">
<div><p:commandButton styleClass="close zoom3" onclick="webSearchDlg.hide()" /></div>
<div class="dialog-content dialog-content2">
<h1 class="dream-search">
<h:outputText value="#{bundle['dreamSearch.HEADER']}" />
</h1>
<p class="dream-search">
<h:outputText value="#{bundle['dreamSearch.SUBHEADER']}" />
</p>
<p:panel id="searchTextPnl">
<div class="dream-search-wrap">
<fieldset>
<p:inputText id="searchText" value="#{dreamSearchBean.searchText}"/>
<p:commandButton tabindex="-1" styleClass="form-btn1" value="#{bundle['dreamSearch.search.button.TEXT']}"
actionListener="#{dreamSearch.search}" update=":dreamWebSearchFrm:resultsPnl"/>
</fieldset>
</div>
</p:panel>
<p:panel id="resultsPnl">
<div class="data-grid-wrap">
<h:outputFormat escape="false" value="#{bundle['dreamSearch.imageResults.TEXT']}" rendered="#{dreamSearchBean.shouldRender}">
<f:param value="#{dreamSearchBean.searchText}" />
</h:outputFormat>
<p:dataGrid var="dream" value="#{dreamSearchBean.dreams}" rendered="#{dreamSearchBean.shouldRender}" columns="5"
rows="10" paginator="true" effect="true"
styleClass="ui-header-visibility"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,15,20" paginatorPosition="bottom">
<p:column>
<h:panelGrid columns="1" style="width:100%">
<p:commandLink onclick="webSearchDlg.hide();dreamEditDlg.show();" update=":dreamEditFrm:display">
<f:setPropertyActionListener value="#{dream}" target="#{dreamModifyBean.selectedDream}"/>
<f:setPropertyActionListener value="false" target="#{dreamModifyBean.editLink}"/>
<p:graphicImage value="#{dream.imageThumb}" width="100" height="100" />
</p:commandLink>
</h:panelGrid>
</p:column>
</p:dataGrid>
</div>
</p:panel>
</div>
</div>
<div class="dialog-bottom-reg"></div>
</h:form>
</p:dialog>
You could do it with Javascript. A similiar question with a variety of answers has been asked some time ago.
Primefaces has it's own (or some adapted JQuery / YUI) javascript bundled. Don't know how it interacts with self-made js. Give it a try!
In order to solve this, I had to ensure that the close button was the very last button within the form.
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>
Im using a rendered commandButton and other button to save input data, But the backing bean doens't receive input from view. I tried all proposition in this post[post]but still doens't work, any help, thanks in advance
here is a part of the code:
<ui:define name="content">
<div class=" marginA">
<div class="row">
<ul class="E">
<p:dataList value="#{userManager.user.diplomas}" var="d">
<h:panelGrid columns="2">
<h:panelGrid columns="1" cellpadding="2">
<h:outputText value="#{d.title}"/>
<h:outputText value="in #{d.dateDiploma} }"/>
</h:panelGrid>
</h:panelGrid>
</p:dataList>
</ul>
<p:commandButton action="#{userManager.switchEdit(true)}"
icon="ui-icon-plus"
type="submit"
immediate="true"
update="add"
ajax="true">
</p:commandButton>
<h:panelGrid columns="4" cellpadding="5" >
<h:outputLabel for="diploma" value="Diploma:"/>
<p:inputText id="diploma"
value="#{userManager.diploma.title}"
required="true">
</p:inputText>
<p:commandButton value="add"
actionListener="#{userManager.addDiploma()}"
imediate="true"
ajax="true"
process="#this"
icon="ui-icon-check" />
</h:panelGrid>
</div>
</div>
My problem is kinda tricky, I hope u get my explanation, I'll be as clear as I can with this.
I have a DataTable that displays a button to see the activities related with the selected item. this opens a little panel with a menu, that at the moment has only one option. This opens yet another panel with 2 forms, in with I do what I need to.
My problem comes when I use the update parameters to add the info I need into the DB.
this is the code for the button I'm using.
<p:commandLink action="#{reporteConsultorBean.verActividades(lead)}" update=":formMain:panelViewNotas" title="Ver actividades asociadas al Expediente">
<center>
<p:graphicImage value="/images/actividad32.png" />
</center>
</p:commandLink>
this is the dialog that pops out once you clicked the button.
<p:dialog id="idDialogActitividades" header="Actividades del Expediente"
widgetVar="dialogActividades" resizable="true"
showEffect="slide" hideEffect="fade">
<center>
<p:panel header="Actividades del Expediente" >
<p:panelGrid columns="1">
<p:commandLink title="Notas" onclick="dialogNotaView.show(); return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/nota.png"/>
</center>
</p:commandLink>
</p:panelGrid>
<br/>
<p:panelGrid columns="1" >
<p:commandLink title="Cerrar" onclick="dialogActividades.hide(); return false;" style="margin:0 auto">
<p:graphicImage value="/images/cerrarBoton.png"/>
</p:commandLink>
</p:panelGrid>
</p:panel>
<br />
</center>
</p:dialog>
and this is the form in which you save the data to de DB.
<p:dialog header="Notas del Expediente" width="950"
widgetVar="dialogNotaView" resizable="true" minWidth="950"
showEffect="slide" hideEffect="fade">
<p:panelGrid columns="2" width="930">
<p:panelGrid columns="1" width="75">
<p:commandLink title="Notas" onclick="return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/nota.png"/>
</center>
</p:commandLink>
</p:panelGrid>
<p:panel id="panelViewNotas" header="Notas del Expediente" width="830">
<center>
<h:form id="formNotas">
<p:messages id="messagesNotas" showDetail="true" autoUpdate="true" />
<p:panelGrid id="panelTabNotas" columns="2" width="800">
<f:facet name="header">
Nota
</f:facet>
<p:graphicImage value="/images/nota.png" />
<h:outputText value="Nota" />
<h:outputText value="" />
<h:outputText value="" />
<h:outputText value="Nombre/Tema *" />
<p:inputText value="#{reporteConsultorBean.notaView.nombre}" required="false" requiredMessage="Es necesario que ingrese el asunto"
size="50" maxlength="49" />
<h:outputText value="Descripción *" />
<p:inputTextarea value="#{reporteConsultorBean.notaView.descripcion}" rows="4" cols="65" maxlength="270"
required="false" requiredMessage="Es necesario que ingrese la descripción de la nota." />
</p:panelGrid>
<br/>
<p:panelGrid columns="2" >
<p:commandLink actionListener="#{reporteConsultorBean.saveNota}"
update=":formMain:growl,:formMain:formNotasResult:panelResultadoNotas,:formMain:formNotas:panelTabNotas,:formMain:formNotas:messagesNotas" title="Guardar Nota" style="margin:0 auto" >
<center>
<p:graphicImage value="/images/guardarBoton.png"/>
</center>
</p:commandLink>
<p:commandLink title="Cerrar" onclick="dialogNotaView.hide(); return false;" style="margin:0 auto">
<center>
<p:graphicImage value="/images/cerrarBoton.png"/>
</center>
</p:commandLink>
</p:panelGrid>
</h:form>
<br/>
<p:separator style="width:700px;height:10px" />
<br/>
<h:form id="formNotasResult">
<p:panel id="panelResultadoNotas" header="Notas del Expediente" width="830">
<p:dataTable id="tablaNotasResumen" var="notaResumen"
value="#{reporteConsultorBean.notasExp}" rowKey="#{notaResumen.idNota}"
paginator="true" rows="4" emptyMessage="No hay registros"
selectionMode="single" selection="#{reporteConsultorBean.notaSelected}">
<p:column headerText="Nombre/Asunto">
#{notaResumen.nombre}
</p:column>
<p:column headerText="Descripción"> #{notaResumen.descripcion}
</p:column>
<p:column headerText="Creador">
#{notaResumen.actividad.creador}
</p:column>
<p:column headerText="Fecha Creación">
<h:outputText value="#{notaResumen.actividad.fechaCreacion}">
<f:convertDateTime type="date" pattern="dd-MM-yyyy"/>
</h:outputText>
</p:column>
<p:column>
<p:commandLink title="Editar Nota"
update=":formMain:formNotas:panelTabNotas"
action="#{reporteConsultorBean.editarNota(notaResumen)}">
<p:graphicImage value="/images/editarBoton.png" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
</center>
<br/>
</p:panel>
my problem comes when I use "panelViewNotas" in the button above. When I use it everything is displayed as it should, but when I hit the "Save" button on the last form, nothing happens (not even a nullPointerException in the Log or Tomcat).
and when I use:
update=":formMain:formNotasResult:panelResultadoNotas,:formMain:formNotas:panelTabNotas"
the data gets stored in the DB with no problem, but the View of the whole thing gets messed up "DialogNotaView" it shows one form in top of the other.
I hope you understand this problem and that u can help me.
How can I fix this problem?