CommandButton Onclick inside tab always takes me to first tab Primefaces - primefaces

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()"/>

Related

p: dialog is not working as expected?

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.

Primefaces commandButton inside a DataGrid

I have a datagrid and its element is a panel and some components including a commandbutton, i load the data from the bean but the actionlistning of the commandbutton is not firing even in eclipse debug mode it does not reach the method.
<p:layout fullPage="true">
<p:layoutUnit header="Islands" position="west" closable="false" collapsed="false" collapsible="true" size="180">
<h:form>
<p:toolbar>
<f:facet name="left"><p:commandButton value="New island" icon="ui-icon-disk"></p:commandButton></f:facet>
</p:toolbar>
<p:dataGrid columns="1" value="#{empcreator.islands}" var="island">
<p:panel header="#{island.name}" style="text-align:center">
<p:toolbar>
<f:facet name="left">
<p:commandButton icon="ui-icon-disk"></p:commandButton>
<p:commandButton icon="ui-icon-trash"></p:commandButton>
</f:facet>
<f:facet name="right">
<p:commandButton value="Load" actionListener="#{empcreator.loadIsland}"></p:commandButton>
</f:facet>
</p:toolbar>
<p:panelGrid columns="2">
<p:outputLabel value="ID"></p:outputLabel>
<p:outputLabel value="#{island.id}"></p:outputLabel>
<p:outputLabel value="X"></p:outputLabel>
<p:outputLabel value="#{island.x}"></p:outputLabel>
<p:outputLabel value="Y"></p:outputLabel>
<p:outputLabel value="#{island.y}"></p:outputLabel>
<p:outputLabel value="Model"></p:outputLabel>
<p:outputLabel value="#{island.model}"></p:outputLabel>
</p:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" collapsed="false" collapsible="false" id="mainl" >
<div id="cmain" style="padding:0px" onresize="onWindowResize"></div>
</p:layoutUnit>
</p:layout>
is the problem related to the form ?
It should be nested from p:column, it worked fine

How to create a List in a Session and submit before

I need create a list of Phones in na and submit before.
In my firt try the object came empty and the list shows a list of null objets
<h:panelGrid id="gridPhone" columns="5">
<h:outputText value="Numero:" />
<h:inputText value="#{profileMB.phone.number}" size="10"/>
<h:outputText value="Tipo" />
<p:selectOneMenu id="selPhoneType" value="#{profileMB.phone.type}" >
<f:selectItems var="phoneType" value="#{profileMB.listPhoneTypes}" itemLabel="#{phoneType.description}" itemValue="#{phoneType}" />
</p:selectOneMenu>
<p:commandButton action="#{profileMB.addPhoneOnList()}" immediate="true" value="adicionar" update=":messageGrowl listPhones"/>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center;width: 300px;">
<p:selectOneListbox id="listPhones" >
<f:selectItems var="phones" value="#{profileMB.phones}" itemLabel="#{phones.number}" />
</p:selectOneListbox>
</h:panelGroup>
</f:facet>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/spiffygif_30x30.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
in my second try the object was filled but the Litt does update
<h:panelGrid id="gridPhone" columns="5">
<h:outputText value="Numero:" />
<h:inputText value="#{profileMB.phone.number}" size="10"/>
<h:outputText value="Tipo" />
<p:selectOneMenu id="selPhoneType" value="#{profileMB.phone.type}" >
<f:selectItems var="phoneType" value="#{profileMB.listPhoneTypes}" itemLabel="#{phoneType.description}" itemValue="#{phoneType}" />
</p:selectOneMenu>
<p:commandButton action="#{profileMB.addPhoneOnList()}" partialSubmit="true" process="gridPhone, listPhones" value="adicionar" update=":messageGrowl"/>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center;width: 300px;">
<p:selectOneListbox id="listPhones" >
<f:selectItems var="phones" value="#{profileMB.phones}" itemLabel="#{phones.number}" />
</p:selectOneListbox>
</h:panelGroup>
</f:facet>
<p:ajaxStatus style="display:block;margin-bottom:2em;height:24px;">
<f:facet name="default">
<h:outputText value="" />
</f:facet>
<f:facet name="start">
<p:graphicImage name="/images/spiffygif_30x30.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</h:panelGrid>
I have try sereval forms but dont work
:(

update parameter in Java Primefaces

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?

Primefaces p:dialog modal="true" appendToBody it´s not working

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>