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.
Related
I have a view which contain the following fields:
<p:selectOneMenu style="width:40px" value="#{capacityFamilyBean.capacityFamily.bottleneck}">
<f:selectItems value="#{capacityFamilyBean.availableCapFamilyBottlenecks()}"/>
</p:selectOneMenu>
<p:inputText id="capacityFamilyName" binding="#{capacityFamilyName}" style="margin-left:20px" value="#{capacityFamilyBean.capacityFamily.name}">
<p:ajax event="change" update="newBundleButton"/>
</p:inputText>
<p:commandButton id="newBundleButton" icon="ui-icon-plus" disabled="#{empty capacityFamilyName.value}" value="${msgs.New}" oncomplete="PF('capacityFamilyDialog').show();"/>
you can see the value properties are {capacityFamilyBean.capacityFamily.prprty}
capacityFamilyDialog uses the same properties, but they are not pre-filled
<p:selectOneMenu value="#{capacityFamilyBean.capacityFamily.bottleneck}">
<f:selectItems value="#{capacityFamilyBean.availableCapFamilyBottlenecks()}" />
</p:selectOneMenu>
<p:inputText id="capacityFamilyName" style="margin-left:20px" value="#{capacityFamilyBean.capacityFamily.name}"/>
I'm assuming they refer to different capacityFamily object, but how can I counter that?
The dialog is delivered with the page. So it's completely empty.
oncomplete="PF('capacityFamilyDialog').show();"
is pure javascript and only shows this empty popup. If you like to have a dialog with actual values, you have to update it in an ajax-call like your commandButton.
<p:commandButton value="${msgs.New}" update="capacityFamilyDialog_ID" oncomplete="PF('capacityFamilyDialog').show();"/>
The dialogue is functional when you click the button. I think you should update the id for dialogue box.
JSF Code
<p:commandButton id="impBtb"
process="#this" icon="ui-icon-plus" disabled="#{empty capacityFamilyName.value}"
value="${msgs.New}" oncomplete="PF('capacityFamilyDialog').show();" update="#form:capacityFamilyDialog">
</p:commandButton>
So, you may have to perform a ajax-call from your commandbutton to update the dialog box.
Hope it helps!!
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 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
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.
I'm trying to display validation messages everytime the user clicks on a radio button.
This only works when I click on the submit button, but not when I click on the radio button:
<h:form id="form">
<p:panel id="panel">
<ui:repeat value="#{questionsBean}" var="question">
<h:panelGrid columns="3" style="margin-bottom:10px" cellpadding="5">
<h:outputText value="#{question.questionText}" />
<p:selectOneRadio id="question" value="#{question.response}"
validator="#{question.validate}" required="true">
<f:selectItem itemLabel="Yes" itemValue="Yes" />
<f:selectItem itemLabel="No" itemValue="No" />
<p:ajax update="msgQuestion" event="change"/>
</p:selectOneRadio>
<p:message for="question" id="msgQuestion" />
</h:panelGrid>
</ui:repeat>
<p:commandButton id="btn" value="Save" update="panel" partialSubmit="true"/>
</p:panel>
</h:form>
The HTML DOM change event is the wrong event when you want to listen on whether the radio button (or checkbox) is clicked. You should be using the click event for this.
The value of the radio button (and checkbox) basically never changes. It has always the same value. The question is more whether that value will be sent to the server side or not. This is determined by the "checked" state which is usually triggered by the DOM click event.
The actual behaviour of the change event on radiobuttons/checkboxes is dependent on the webbrowser used. The behaviour is particulary inconsistent in the IE browser. It not only depends on the version used, but also in the rendering mode used (quirks mode vs standards mode). Perhaps you were actually using IE while testing.
The default event type of the PrimeFaces <p:ajax> (and the standard JSF <f:ajax>), which is valueChange already automatically covers this:
<p:ajax update="msgQuestion" event="valueChange" />
This will autogenerate the right change event handler in text inputs and dropdowns and the click event handler in radiobuttons and checkboxes.
But as said, it's the default event type already. Just omit it altogether.
<p:ajax update="msgQuestion" />