How to process primefaces dialog - jsf-2

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.

Related

Overlaypanel inside picklist inside dialog not showing value

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.

syntaxhighlighter CSS not working

I add the syntaxhighlighter library to my project in order to view XML files.
For some reason when using the syntaxhighlighter outside the dialog then I can see the CSS style but not within the dialog.
This is not working:
<p:commandButton id="button"
value="View"
oncomplete="hdsWidgetVar.show()"
update=":mainForm:hdsForm"
disabled="#{object.disableButton}"
icon="ui-icon-search"
style="float: right"/>
</p:row>
</p:panelGrid>
<f:verbatim><br/></f:verbatim>
<p:dialog id="hdsDialog"
widgetVar="hdsWidgetVar"
header="HDS"
width="800"
showEffect="clip"
hideEffect="clip"
position="left"
appendTo="#(body)"
dynamic="true" >
<h:form id="hdsForm">
<pre class="brush: xml">
<h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
</pre>
</h:form>
</p:dialog>
I cannot use dynamic="false" since I need to refresh the dialog text when user press the button.
Is there any workaround ?
Thanks
are you nesting forms?? using appendTo is a workaround to avoid nesting. i would not use it, if i can.
this should work, if you can separate forms:
<h:form>
<p:panelGrid>
<p:row>
<p:commandButton id="button"
value="View"
oncomplete="hdsWidgetVar.show()"
process="#form"
update="#this :hdsForm"
disabled="#{object.disableButton}"
icon="ui-icon-search"
style="float: right"/>
</p:row>
</p:panelGrid>
</h:form>
<f:verbatim><br/></f:verbatim>
<p:dialog id="hdsDialog"
widgetVar="hdsWidgetVar"
header="HDS"
width="800"
showEffect="clip"
hideEffect="clip"
position="left"
appendTo="#(body)"
dynamic="true" >
<h:form id="hdsForm">
<pre class="brush: xml">
<h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
</pre>
</h:form>
</p:dialog>
if you can't, this should go:
<h:form>
<p:panelGrid id="panelGrid">
<p:row>
<p:commandButton id="button"
value="View"
oncomplete="hdsWidgetVar.show()"
process="panelGrid"
update="#this hdsForm"
disabled="#{object.disableButton}"
icon="ui-icon-search"
style="float: right"/>
</p:row>
</p:panelGrid>
<f:verbatim><br/></f:verbatim>
<p:dialog id="hdsDialog"
widgetVar="hdsWidgetVar"
header="HDS"
width="800"
showEffect="clip"
hideEffect="clip"
position="left">
<h:panelGroup id="hdsForm">
<pre class="brush: xml">
<h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
</pre>
</h:panelGroup>
</p:dialog>
</h:form>
but maybe it's not a problem related to dynamic. more likely it's lib-to-work-with-ajax related.
this will solve the problem:
<p:commandButton id="button"
value="View"
oncomplete="SyntaxHighlighter.highlight();udmWidgetVar.show();"
process="#form"
update="#this :hdsForm"
disabled="#{object.disableButton}"
icon="ui-icon-search"
style="float: right"/>
and:
<p:dialog id="hdsDialog"
widgetVar="hdsWidgetVar"
header="HDS"
width="800"
showEffect="clip"
hideEffect="clip"
position="left"
appendTo="#(body)"
dynamic="false">
<h:panelGroup id="hdsForm" >
<pre class="brush: xml">
<h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
</pre>
</h:panelGroup>

Show row data from datatable in dialog in JSF

I have a simple CRUD application written in JSF 2.2 and PrimeFaces 3.5. The database consists of two tables - Clients and Orders. I have a view with datatable where all clients are listed and in the last column are three buttons - for eidt, delete and showing the orders for each client. When edit button is clicked the data for the selected client should be loaded in a modal dialog form but no matter which button is pressed in the dialog always is loaded data for the client in the first row. Same for the delete button.
Here is the code of the view:
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:commandButton id="addNewClientButton" type="button"
onclick="add.show();" value="Add new client"
action="clientBeans.newClient" />
<br />
<p:dataTable var="client" value="#{clientBeans.getAllClients()}"
border="true">
<p:column headerText="Client Id">
<h:outputText value="#{client.clientId}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{client.name}" />
</p:column>
<p:column headerText="Address">
<h:outputText value="#{client.address}" />
</p:column>
<p:column headerText="Email">
<h:outputText value="#{client.email}" />
</p:column>
<p:column headerText="Options">
<p:commandButton value="Edit" id="editClientButton"
action="#{clientBeans.editClient}" type="button"
update=":form:editClient" onclick="edit.show();">
<f:setPropertyActionListener
target="#{clientBeans.client}"
value="#{client}" />
</p:commandButton>
<p:commandButton action="#{clientBeans.deleteClient}"
value="Delete"
id="deleteClientButton" type="button"
onclick="remove.show();"
icon="ui-icon-circle-close">
<f:setPropertyActionListener
target="#{clientBeans.client.clientId}"
value="#{client}" />
</p:commandButton>
<p:commandButton
action="#orderBeans.getSpecificOrders(client.clientId)}"
value="Orders">
<f:setPropertyActionListener
target="#{clientBeans.client.clientId}"
value="#{client.clientId}" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<h:form>
<p:dialog id="addNewClient" header="Add new client" widgetVar="add"
modal="true" resizable="false">
<p:panelGrid columns="2" border="false">
<h:outputLabel for="name" value="Name: " />
<p:inputText id="name" value="#{clientBeans.client.name}"
label="name" required="true" />
<h:outputLabel for="address" value="Address: " />
<p:inputText id="address"
value="#{clientBeans.client.address}"
label="address" required="true" />
<h:outputLabel for="email" value="Email: " />
<p:inputText id="email" value="#{clientBeans.client.email}"
label="email" required="true" />
<f:facet name="footer">
<p:commandButton
action="#{clientBeans.createClient}" value="Save"
icon="ui-icon-check" style="margin:0">
</p:commandButton>
</f:facet>
</p:panelGrid>
</p:dialog>
</h:form>
<h:form>
<p:dialog id="editClient" header="Edit client" widgetVar="edit"
modal="true" resizable="false">
<h:panelGrid columns="2" id="displayClient">
<h:outputLabel for="id" value="Id: " />
<h:outputText id="id" value="#{client.clientId}" label="id" />
<h:outputLabel for="name" value="Name: " />
<p:inputText id="name" value="#{client.name}" label="name"
required="true" />
<h:outputLabel for="address" value="Address: " />
<p:inputText id="address" value="#{client.address}" label="address"
required="true" />
<h:outputLabel for="email" value="Email: " />
<p:inputText id="email" value="#{client.email}" label="email"
required="true" />
<f:facet name="footer">
<p:commandButton
action="#{clientBeans.updateClient}" value="Save"
icon="ui-icon-check" style="margin:0">
</p:commandButton>
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>
<h:form>
<p:dialog id="deleteClient"
header="Are you sure you want to delete this client?"
widgetVar="remove" modal="true" resizable="false">
<p:panelGrid columns="2">
<h:outputLabel for="id" value="Id: " />
<h:outputText id="id" value="#{client.clientId}" label="id" />
<h:outputLabel for="name" value="Name: " />
<h:outputText id="name" value="#{client.name}" label="name" />
<h:outputLabel for="address" value="Address: " />
<h:outputText id="address" value="#{client.address}" label="address" />
<h:outputLabel for="email" value="Email: " />
<h:outputText id="email" value="#{client.email}" label="email" />
<f:facet name="footer">
<p:commandButton action="#{clientBeans.confirmDeleteClient}"
value="Delete" icon="ui-icon-circle-close" />
</f:facet>
</p:panelGrid>
</p:dialog>
</h:form>
I haven't gone through all the code, but I could quickly spot that you have misused <p:commandButton>: the attribute type="button" should only be used for invoking custom JavaScript (client) code, it is therefore not compatible with action and actionListener, that are suitable for invoking server actions. Remove this attribute and ensure that the managed beans's method #{clientBeans.editClient} is invoked.
Look at PrimeFaces documentation, commandButtons with type="button" are called "Push Buttons".
Second, use oncomplete instead of onclick, in order to show the dialog after the ajax method has completed its job.

p: inputText freezes when I update the form

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?)

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