I am using Primefaces 3.4.2 with JSF 2.0
I have the following in a dialog popup in JSF page.
<p:dialog header="Create New Request" style="font-weight:bold"
widgetVar="newDialog" resizable="false" id="newDlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" position="center top" width="850" height="450">
<p:panelGrid columns="2">
<h:outputLabel value="Employee" for="employee" />
<p:selectOneMenu id="employee" value="#{mymb.employee}"
converter="#{employeeConverter}">
<f:selectItems value="#{mymb.employeeItems}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeNumber}"/>
<p:ajax listener="#{mymb.loadDepartments}" process="#this"/>
</p:selectOneMenu>
</p:panelGrid>
<p:separator />
</p:dialog>
If I use appendToBody="true", then selectOneMenu Converter class doesn't gets invoked, but if I make it appendToBody="false", then Converter class gets invoked.
What could be the reason for this? appendToBody="false" makes my popup dialog unusable, not able to navigate using mouse.
How can I resolve this issue?
Remove the appendToBody and put an <h:form/> inside your dialog(along with it's content).
The purpose of appendToBody="false" is to ensure your dialog is rendered within the body (and hence within the main <h:form/>) of the HTML output.
Without appendToBody="false" , the dialog might end up being appended to the end of the markup in <body/> and as a result, nothing inside it will get executed.
Adding <h:form/> to your dialog ensures that even if it winds up outside the <body/> it will still be able to submit to the server
Related
I have a problem because I want to keep a Dialog of Primefaces open, but every time I press the register button, it closes.
This, when the data is well loaded, would not be a big problem. Since they are recorded in the database and the operation ends.
My intention is to make the Dialog remain on the screen until I decide to close it with another button. This is because if the validations throw an error, it should remain until they correct the data, or decide not to register.
Attached Dialog code:
<h:form id="frmAltaCombustible">
<p:dialog header="Nuevo Combustible" widgetVar="dialogoNuevoCombustible" resizable="false" width="900" showEffect="explode" hideEffect="explode" >
<p:panelGrid id="nuevoCombustible" columns="3">
<p:outputLabel value="Identificador de Combustible:" for="txtIdentificador"/>
<p:inputText id="txtIdentificador" label="Identificador" value="#{mbCombustibles.combustible.idcombustible}">
<f:validator validatorId="validadorVacio"/>
</p:inputText>
<p:message for="txtIdentificador"/>
<p:outputLabel value="Nombre de combustible:" for="txtDescripcion"/>
<p:inputText id="txtDescripcion" label="Nombre" value="#{mbCombustibles.combustible.descripcion}">
<f:validator validatorId="validadorVacio"/>
</p:inputText>
<p:message for="txtDescripcion"/>
<p:commandButton value="Registrar Combustible" actionListener="#{mbCombustibles.registrar()}" update=":frmAltaCombustible,:frmListaCombustibles"/>
</p:panelGrid>
</p:dialog>
</h:form>
If what you want to do is update the form fields within the dialog you should use update="nuevoCombustible" instead.
Assuming that your dialog is rendered by changing the CSS attributes with javascript, you're effectively losing those values when the component is re-rendered.
I'm seeing a strange behaviour with Primefaces (4.0) related to Panels whose collapsed-attributes are bound to a property in a backing bean. Updating the state works fine so the panel collapses/expands correctly when the value of the backing bean changes.
The problem is: I have some p:Dialogs that can be opened to enter some additional/optional information. After closing the dialog, the panel fails to expand/collapse when changing the value. Strangely, other attributes bound to the same property get updated like before.
Example:
XHTML of two panels whose collapsed Attribute is bound to a property. Note that the disabled-attribute of the checkboxes are bound to the same property and still get updated after the dialog is closed.
<p:panel id="panel1" style="width:80%;" toggleable="true" collapsed="#{!bean.panel1.enabled}" widgetVar="panel1Var">
<f:facet name="header">
<p:outputLabel value="Panel1"/>
<p:selectBooleanCheckbox id="p1_enabled" style="margin-left:20px;" disabled="#{bean.panel2.enabled}" value="#{bean.panel1.enabled}">
<f:ajax render="panel1 panel2" />
</p:selectBooleanCheckbox>
</f:facet>
<p:panelGrid columns="2" style="width:100%;" columnClasses="input-col1,input-col2">
<!-- omitted -->
</p:panelGrid>
</p:panel>
<p:panel id="panel2" style="width:80%;" toggleable="true" collapsed="#{!bean.panel2.enabled}" widgetVar="panel2Var">
<f:facet name="header">
<p:outputLabel value="Panel2"/>
<p:selectBooleanCheckbox id="p2_enabled" style="margin-left:20px;" disabled="#{bean.panel1.enabled}" value="#{bean.panel2.enabled}">
<f:ajax render="panel1 panel2" />
</p:selectBooleanCheckbox>
</f:facet>
<p:panelGrid columns="2" style="width:100%;" columnClasses="input-col1,input-col2">
<!-- omitted -->
</p:panelGrid>
</p:panel>
XHTML somewhere else on the same page which opens a dialog:
<p:commandLink id="contactbutton" onclick="PF('contactextended').show();">
<h:outputText value="Extended" />
</p:commandLink>
The dialog is configured like this:
<p:dialog widgetVar="contactextended" modal="true" width="600px" height="500px" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
The backing bean is a straightforward bean with properties and getters/setter which obviously work. Is there a problem in my implementation? Any ideas how to work around this issue?
Thanks in advance!
Fixed this by myself. The solution seems to be to add process="#this"to the commandLink. I am still not sure what the underlying problem is/was, but at least it doesn't get triggered anymore.
Here is some html I am writing to allow categories to be added using a dialog:
<p:dialog id="newCategoryDlg" header="Add New Category" widgetVar="newCategoryDialog" resizable="false">
<h:form id="newCategoryForm">
<p:panelGrid id="displayNewCategory" columns="2" cellpadding="4" style="margin:0 auto;">
<h:outputText value="Category Name :"></h:outputText>
<p:inputText value="#{categoryController.newCategory.name}"
required="true" requiredMessage="Please Enter a Category ID!" />
<f:facet name="footer">
<p:commandButton value="Submit" update=":form:categoryTable"
oncomplete="newCategoryDialog.hide();"
actionListener="#{categoryController.addCategory}">
<p:resetInput target="displayNewCategory" />
</p:commandButton>
<p:commandButton type="reset" value="Reset"></p:commandButton>
</f:facet>
</p:panelGrid>
</h:form>
</p:dialog>
Now, for whatever reason, "" just doesn't seem to work no matter which widget or identifier I use. All I want is for old input entries to disappear after they have been submitted. What am I doing wrong?
You misunderstood the purpose of <p:resetInput>. This misunderstanding is essentially already answered/explained here: Why does p:resetInput require properties of a managed bean to be set to null first after the form is submitted?
As to your concrete functional requirement of the need to update the dialog's content before opening, just do exactly that in the command button which opens the dialog:
<h:form>
<p:commandButton value="Open dialog" action="#{dialogBean.init}"
process="#this" update=":dialog" oncomplete="w_dialog.open()" />
</h:form>
...
<p:dialog id="dialog" widgetVar="w_dialog" ...>
Note that when the dialog contains fields which needs to be validated, then the <p:resetInput> would be very applicable in the button who's updating and opening the dialog in order to clear out invalid state.
See also:
How to show details of current row from p:dataTable in a p:dialog and update after save
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
I am using primefaces dialogbox for popup purpose. But everytime it gets opened the whole screen get refreshed automatically and the popup disappears.
< p:dialog id="dialog" header="Select different user" styleClass="atf-header" widgetVar="dlg" appendToBody="true">
<ui:include src="searchpopup.xhtml" />
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header" style="width:600px"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton" style="width:600px">
<h:panelGroup id="input_search_section" >
<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()">
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
You p:commandButton is AJAX button (which is default in primefaces) which submits whole form. Add type="button" attribute to it so it will be just ordinary button which do some JavaScript (so called push button). Also I don't see where is h:form tag here. As you have appendToBody="true" in you p:dialog be shore that you don't encapsulate p:dialog inside h:form. You should have h:form inside p:dialog if it is necessary, and if it is not move p:dialog outside of h:form.
I have some weird issue with datatable selection (most likely i'm doing something wrong).
Idea is simple - datatable with selection and a dialog to edit the records. The problem is that if i use <h:inputText> tag (or <p:inputText>) it appears to be blank, though the object in the backing bean (indicatorBean.indicator.code) contains data. Interestingly if i put <h:outputText> instead of input the data is shown.
here are contents of my body
<!-- language: xml -->
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable id="indicatorsTable" var="ind"
value="#{indicatorBean.indicators}"
selectionMode="single"
selection="#{indicatorBean.indicator}"
rowKey="#{ind.id}">
<p:column headerText="Name" style="width:125px">
#{ind.name}
</p:column>
<p:column headerText="Code" style="width:125px">
#{ind.code}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View"
icon="ui-icon-search" update=":form:display"
oncomplete="indDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Indicator Detail"
widgetVar="indDialog" resizable="false"
width="400" showEffect="fade" hideEffect="fade">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Code:"/>
<!-- PROBLEM IS HERE -->
<h:inputText value="#{indicatorBean.indicator.code}"/>
<h:outputText value="Name:"/>
<h:outputText value="#{indicatorBean.indicator.name}"/>
</h:panelGrid>
<p:commandButton value="Save" onclick="indDialog.hide()"/>
<p:commandButton value="Cancel" onclick="indDialog.hide()"/>
</p:dialog>
</h:form>
</h:body>
Backing bean is nothing other that accessors.
Another thing i spotted is if i replace el expression in <h:inputtext> with a static text (like <h:inputText value="static text"/>), it is shown.
Here are some pictures:
Dialog with inputtext
Dialog with outputtext
Dialog with static text
primefaces 3.4
The problem as you seem to have already figured out is that you are placing the dialog itself inside of a form. This is an issue because of the way the jQuery dialog control works, which is the client side foundation of the Primefaces dialog. Essentially it will move DOM elements associated with the dialog elsewhere, possibly outside of the form that you intend to enclose it.
This problem can be easily solved by putting the dialog outside of the form, and putting a form inside of the dialog body instead.
<p:dialog id="dialogId" ...>
<h:form id="dlgForm">
....
</h:form>
</p:dialog>
In this way when jQuery UI moves the dialog control elsewhere in the DOM, the contents of that DOM, including the form come with it.