I am using JSF 2 with primefaces 3.5 and i have the following problem:
p: inputText freezes when I update the form,
I have the following code in my xhtml:
<p:panel visible="#{clientesMB.renderPanelEditPerFirmas}" id="panelEditEmpresa" header="Adicionar Personas">
<h:panelGrid columns="2">
<h:outputText value="Nombre: *" style="font-size: 12px"/>
<p:inputText value="#{clientesMB.personaFirma}"
style="width: 400px;"
label="text"/>
</h:panelGrid>
<p:dataTable id="cuentasTabla" var="car" value="#{clientesMB.selectedEmpCliente.personasFirmas}" widgetVar="carsTable">
<f:facet name="header">
Listado de Personas
</f:facet>
<p:column headerText="Nombre" style="width:25%">
<h:outputText value="#{car.nombre}"/>
</p:column>
<p:column style="width:4%" exportable="false">
<p:commandButton id="selectButton" onclick="confirmation.show()" icon="ui-icon-trash" title="Eliminar">
<f:setPropertyActionListener value="#{car}" target="#{clientesMB.personaFirmasSelect}"/>
</p:commandButton>
</p:column>
</p:dataTable>
</p:panel>
when I call the Confirmation and I click yes, the outputText freezes. If I refresh all page then outputText work ok. This is the confirmation:
<p:confirmDialog id="confirmDialog" message="Realmente desea eliminar el elemento?"
header="Mensaje de Confirmación" severity="alert" widgetVar="confirmation">
<p:commandButton id="confirm" value="Si" oncomplete="confirmation.hide()"
actionListener="#{clientesMB.deleteSelectPersonaFirma}" update=":form2"/>
<p:commandButton id="decline" value="No" onclick="confirmation.hide()" type="button" />
</p:confirmDialog>
form2 contain the panel "panelEditEmpresa", and confirmDialog is in other form.
I used your code and i don't have your issue, did you use ajax for inputtext ?
(BalusC: How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?)
Related
I have this button in a form
<p:commandButton process="#this" update=":solution" title="Modify"
actionListener="#{controller.addSolutionAction(registerCause)}"
icon="ui-icon-plus" />
It displays this dialog (it's outside the form)
<p:dialog header="Solutions widgetVar="dlgSolution" id="solution"
showEffect="fade" hideEffect="drop" closable="true" resizable="true" modal="true">
<h:form id="dialog">
<p:pickList id="solutions" var="sol" effect="drop"
itemValue="#{sol}" itemLabel="#{sol.code}" converter="solutionConverter" label="Solutions" >
<f:facet name="sourceCaption">No Seleccionadas</f:facet>
<f:facet name="targetCaption">Seleccionadas</f:facet>
<p:ajax event="transfer" update="#form"
listener="#{controller.handleSolutionChange}" />
<p:column>
<h:outputText id="codeID" value="#{sol.code}" />
</p:column>
<p:column>
<p:commandButton id="button" icon="ui-icon-search" type="button" update="buttonP"/>
<p:overlayPanel id="buttonP" for="button" hideEffect="fade">
<p:editor id="description" required="true"
label="Ver más" width="300" widgetVar="descriptionWidget"
value="#{sol.description}" disabled="true" controls="">
</p:editor>
</p:overlayPanel>
</p:column>
</p:pickList>
<p:outputPanel styleClass="divButton">
<p:growl id="growlMessagePreview" life="2000" />
<p:commandButton icon="ui-icon-close" title="Close" process="#form" update="#form" value="Close" oncomplete="dlgSolution.hide()" />
</p:outputPanel>
</h:form>
</p:dialog>
What I want to do is show the solution's description when I click the button, but it's always empty. I need it to be an editor because the text is formatted
(I tried using a text area but it's empty too), then I put a string but it's not shown. I also used dynamic = "true" in the overlaypanel, it showed the hard coded string but not the value I need.
I'm using Primefaces 3.5. Any suggestions will be welcome, if you need more details, let me know.
I am using JSF 2.2 with PrimeFaces 5.0. I have a dataTable with cell-editing.
I am having problems with the dataTable inside dialog when I set editMode="cell", the outputtext after editing it's doesn't appear, but when i put the datatable edit outside dialog, it's work.When I inspect the element of datatable
<div class="ui-cell-editor-output" style="display: none;"></div> it's empty but if i put the datatable edtor outside dialog the outPut element isn't empty
Let me explain with some code:
<p:dialog id="modif" width="80%" widgetVar="w_edit" modal="true" >
<p:tabView >
<p:tab title="Controle de Réception ">
<h:panelGrid>
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme(lotRecpBean.currentLotReception.entrant)}"
var="item" editable="true" editMode="cell" >
<p:column headerText="Valeur Controle" styleClass="ui-editable-column">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{item.valeurControle}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{item.valeurControle}" style="width: 50%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column width="15%" headerText="Testeur">
<p:cellEditor >
<f:facet name="output"><h:outputText value="#{item.testeurCR.nom}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{item.testeurCR.nom}" style="width:50%">
<f:selectItems value="#{personnelBean.liste}" var="perso" itemLabel="#{perso.nom}" itemValue="#{perso}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:panelGrid>
</p:tab>
</p:tabView>
</p:dialog>
I hope (like always) any of you could save me again.
All user input must be inside of a form. You'll need an <h:form> inside the dialog.
I still have the same problem when i modify the row in datatable editor inside dialog the outputtext doesn't change still have the old value ,but when i put this datatable in simple page work
<p:dialog id="modif" width="80%" widgetVar="w_edit" modal="true" >
<p:tabView >
<p:tab title="Controle de Réception ">
<h:form>
<h:panelGrid>
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme(lotRecpBean.currentLotReception.entrant)}"
var="item" editable="true" editMode="cell" >
<p:column headerText="Valeur Controle" styleClass="ui-editable-column">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{item.valeurControle}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{item.valeurControle}" style="width: 50%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column width="15%" headerText="Testeur">
<p:cellEditor >
<f:facet name="output"><h:outputText value="#{item.testeurCR.nom}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{item.testeurCR.nom}" style="width:50%">
<f:selectItems value="#{personnelBean.liste}" var="perso" itemLabel="#{perso.nom}" itemValue="#{perso}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:panelGrid>
<h:form>
</p:tab>
<p:tab title="Info lot de Réception">
<h:form>
<p:panelGrid id="idPanel">
<p:row>
<p:column><p:outputLabel value="QuantiteLivree:" for="quantiteLivree" /></p:column>
<p:column><p:inputText id="quantiteLivree" value="#{lotRecpBean.currentLotReception.quantiteLivree}" title="QuantiteLivree" /></p:column>
<p:column><p:outputLabel value="QuantiteRecue:" for="quantiteRecue" /></p:column>
<p:column><p:inputText id="quantiteRecue" value="#{lotRecpBean.currentLotReception.quantiteRecue}" title="QuantiteRecue" /></p:column>
<p:column><p:outputLabel value="NumBonLivraison:" for="numBonLivraison" /></p:column>
<p:column><p:inputText id="numBonLivraison" value="#{lotRecpBean.currentLotReception.numBonLivraison}" title="NumBonLivraison" /></p:column>
</p:row>
</p:panelGrid>
<div>
<p:commandButton action="#{lotRecpBean.update()}" value="Enregistrer" styleClass="button"
style="float: right" oncomplete="PF('lotRecepTable').filter();PF('w_edit').hide();" />
</div>
</h:form>
</p:tab>
</p:tabView>
</p:dialog>
I fixed the problem , it's come from the value of datatable ===> the value of datatable editor must be a list and not a method which return a list datatable editor work just with a list 1-
<p:dataTable id="data1" value="#{normeMicroEBean.listOfNorme}"
var="item" editable="true" editMode="cell" >
I create a list in the managed bean t and in the button i execute the method to full the list created in the managed bean . thank you for your response
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.
I need your help on JSF2. I made a datatable to list data items from database. I want to select an item from that list an print it on an edit dialog. The problem is that the item's data is'nt shown on that dialog. Here is JSF code used to generate it:
<p:dataTable value="#{airportController.items}" var="item" style="border: 0px;">
<f:facet name="header">Airports</f:facet>
<p:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{item.airportId}"/>
</p:column>
<p:column>
<f:facet name="header"></f:facet>
<p:commandButton title="View" value="" update=":airportForm:airportEditForm" icon="edit_icon.gif"oncomplete="editAirportDlg.show();">
<f:setPropertyActionListener value="#{item}" target="#{airportController.selected}"/>
</p:commandButton>
</p:column>
<p:commandButton value="Ajouter" onclick="createAirportDgl.show();"/>
</p:dataTable>
<p:dialog id="airportEditForm" widgetVar="editAirportDlg" modal="false" header="Modifier" rendered="true" resizable="false">
<h:panelGrid id="airportDisplay" columns="2" paginator="true" rows="10" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="5,10,15">
<h:outputText value="Pays"/>
<p:inputText value="#{airportController.selected.country}"/>
<h:outputText value="Ville"/>
<p:inputText value="#{airportController.selected.city}"/>
<h:outputText value="Nom"/>
<p:inputText value="#{airportController.selected.name}"/>
<h:outputText value="Addresse"/>
<p:inputText value="#{airportController.selected.hqAddress}"/>
<p:commandButton value="Valider" action="#{airportController.update()}"/>
</h:panelGrid>
</p:dialog>
All that is put all together in the index.xhtml page.
I don't know what i did wrong.
Could you send the whole xhtml content? This could be a validation problem. Try to use process="#this" on the commandButton and update the airportDisplay instead.
<p:commandButton title="View" value=""
update=":airportForm:airportDisplay"
icon="edit_icon.gif"oncomplete="editAirportDlg.show();" process="#this">
<f:setPropertyActionListener value="#{item}" target="#{airportController.selected}"/>
</p:commandButton>
Try to put everything i.e your datatable and dialog inside h:form with id and then
on edit button click update your dialog with respect to grid id like :form:airportDisplay also shown in below.
<h:form id="form">
<p:growl id="growl" showDetail="true" life="3000"/>
<p:dataTable value="#{airportController.items}" var="item" style="border: 0px;">
<f:facet name="header">Airports</f:facet>
<p:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{item.airportId}"/>
</p:column>
<p:column>
<f:facet name="header"></f:facet>
<p:commandButton title="View" value="" update=":form:airportDisplay" icon="edit_icon.gif"oncomplete="editAirportDlg.show();">
<f:setPropertyActionListener value="#{item}" target="#{airportController.selected}"/>
</p:commandButton>
</p:column>
<p:commandButton value="Ajouter" onclick="createAirportDgl.show();"/>
</p:dataTable>
<p:dialog id="airportEditForm" widgetVar="editAirportDlg" modal="false" header="Modifier" rendered="true" resizable="false">
<h:panelGrid id="airportDisplay" columns="2" paginator="true" rows="10" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="5,10,15">
<h:outputText value="Pays"/>
<p:inputText value="#{airportController.selected.country}"/>
<h:outputText value="Ville"/>
<p:inputText value="#{airportController.selected.city}"/>
<h:outputText value="Nom"/>
<p:inputText value="#{airportController.selected.name}"/>
<h:outputText value="Addresse"/>
<p:inputText value="#{airportController.selected.hqAddress}"/>
<p:commandButton value="Valider" action="#{airportController.update()}"/>
</h:panelGrid>
</p:dialog>
</h:form>
Thanks for help, here is page content,
index.xhtml
<ui:define name="title">
Airports
</ui:define>
<ui:define name="header">
header
</ui:define>
<ui:define name="menu">
menu
</ui:define>
<ui:define name="content">
<h:form id="airportForm">
<ui:include src="list.xhtml"/>
<ui:include src="edit.xhtml"/>
<ui:include src="create.xhtml"/>
</h:form>
</ui:define> </ui:composition>
list.xhtml
<p:dataTable value="#{airportController.items}" var="item" style="border: 0px;" >paginator="true"
rowKey="#{item.airportId}" selection="#{airportController.selected}" >selectionMode="single"
sortBy="#{item.airportId}">
Airports
ID
Nom
Pays
Ville
Addesse
onclick="editAirportDlg.show();"/>
update=":airportForm:airportCreateForm"
onclick="createAirportDgl.show();"/>
edit.xhtml
<p:dialog widgetVar="editAirportDlg" modal="false"
header="Modifier" rendered="true" resizable="false">
<h:form id="airportEditForm">
<h:panelGrid columns="2">
<h:outputText value="Pays :"/>
<p:inputText value="#{airportController.selected.country}"/>
<h:outputText value="Ville: "/>
<p:inputText value="#{airportController.selected.city}"/>
<h:outputText value="Nom: "/>
<p:inputText value="#{airportController.selected.name}"/>
<h:outputText value="Addresse: "/>
<p:inputText value="#{airportController.selected.hqAddress}"/>
<f:facet name="footer">
<p:commandButton value="Valider" icon="ui-icon-disk" action=" {airportController.update()}"/>
</f:facet>
</h:panelGrid>
</h:form>
</p:dialog> </ui:composition>
I've a CommandButton component inside Datatable, which is within a TabView component. ActionListener method of CommandButton component don't work. Never is fired.
This is my XHTML page:
<p:dialog id="dlgView" widgetVar="wvDlgView"
modal="true" closable="true" resizable="false">
<p:outputPanel id="opViewUser">
<h:form>
<p:tabView id="tabViewUser">
<p:tab title="DATOS PERSONALES">
<p:dataTable id="dtUsuarios" rows="5" paginator="true"
selectionMode="single" selection="#{personController.system}">
....
<p:column>
<p:commandButton value="Bloquear" actionListener="#{personController.block}" />
</p:column>
</p:dataTable>
</p:tab>
<p:tabView>
</h:form>
</p:outputPanel>
</p:dialog>
Thanks in advance :)
PD: PF 3.5, JSF (Mojarra) 2.1.3, Tomcat: 6.0.10
Sorry for not posting completely code and answer later. At any rate I think already it isn't necessary because I solved my problem. Explain in more detail the problem:
I had a structure similar to this on tab component:
<p:tab>
<h:form id="formTab" prependId="false">
<h:panelGrid columns="3">
<p:outputLabel value="Sistema " for="sltSystem"/>
<p:selectOneMenu id="sltSistema" required="true"
value="#{personController.idSistema}" >
<f:selectItems value="#{personController.listSistemas"
var="s" itemLabel="#{s.valor}" itemValue="#{s.id}"/>
</p:selectOneMenu>
<p:outputLabel value="Rol " for="sltRol"/>
<p:selectOneMenu id="sltRol" required="true"
value="#{personController.idRol}" >
<f:selectItems value="#{personController.listRoles}"
var="r" itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
<p:dataTable id="dtUsersSystems" rows="5" paginator="true"
value="#{personController.userSystems}" var="s" rowKey="#{s.id}" >
<p:column headerText="SISTEMA">
<h:outputText value="#{s.sistema}" />
</p:column>
<p:column headerText="ROL">
<h:outputText value="#{s.rol}" />
</p:column>
<p:column headerText="ESTADO">
<h:outputText value="#{s.estado}"/>
</p:column>
<p:column>
<p:commandButton value="Bloquear" icon="ui-icon-cancel" actionListener="#{personController.blocked}"></p:commandButton>
</p:column>
</p:dataTable>
<h:form>
</p:tab>
As you can see sltSystem and sltRol components have required attribute in true. For that when I clicked on button "Bloquear" its ActionListener method not was invoked because after I should select a value on sltSystem and sltRol components.
Therefore new page structure is this:
<p:tab>
<h:form id="formSelect" prependId="false">
<h:panelGrid columns="3">
<p:outputLabel value="Sistema " for="sltSystem"/>
<p:selectOneMenu id="sltSistema" required="true"
value="#{personController.idSistema}" >
<f:selectItems value="#{personController.listSistemas"
var="s" itemLabel="#{s.valor}" itemValue="#{s.id}"/>
</p:selectOneMenu>
<p:outputLabel value="Rol " for="sltRol"/>
<p:selectOneMenu id="sltRol" required="true"
value="#{personController.idRol}" >
<f:selectItems value="#{personController.listRoles}"
var="r" itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
</h:form>
<h:form id="formDataTable" prependId="false">
<p:dataTable id="dtUsersSystems" rows="5" paginator="true"
value="#{personController.userSystems}" var="s" rowKey="#{s.id}" >
<p:column headerText="SISTEMA">
<h:outputText value="#{s.sistema}" />
</p:column>
<p:column headerText="ROL">
<h:outputText value="#{s.rol}" />
</p:column>
<p:column headerText="ESTADO">
<p:graphicImage value="#{s.estado}"/>
</p:column>
<p:column>
<p:commandButton value="Bloquear" icon="ui-icon-cancel" actionListener="#{personController.blocked}"></p:commandButton>
</p:column>
</p:dataTable>
<h:form>
</p:tab>
A form for selectonemenu components and other form for datatable component.
Thanks to all :)