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!!
Related
Can anyone explain why h:inputText must have required="true" when setting the property in controller and updating with ajax(See example below)?
Does not work:
<h:inputText id="textFieldId" value="#{model.itemValue}">
Works:
<h:inputText id="textFieldId" value="#{model.itemValue}" required="true">
Action:
<p:commandLink value="edit">
<p:ajax event="click" listener="#{controller.edit(item)}" process="#this" update="#form"/>
</p:commandLink>
Idea behind is that I want to press button for item and be able to edit so I need to propagate this item to inputText.
I dont see any reason for having required set to true.
Thanks
The PrimeFaces p:commandLink is by default already ajax enabled, so there is no need to nest a p:ajax tag inside it.
<p:commandLink value="edit" actionListener="#{controller.edit(item)}"
process="#this" update="#form"/>
But keep in mind that if you add a process="#this", the input is not processed on the server, just the commandLink. If the 'item' field is passed correctly in this case is unclear to me.
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.
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
<p:inputText value="#{bmiCalculatorBean.height}" update="#form" id="height">
<p:ajax update="#form" />
<f:convertNumber pattern="0" />
</p:inputText>
<p:inputText value="#{bmiCalculatorBean.weight}" update="#form" id="weight">
<p:ajax update="#form" />
<f:convertNumber pattern="0" />
</p:inputText>
I have a problem where after I enter a value into the first inputText and click on the "weight" inputText after a short delay the focus is lost and you need to click on the input box again.
How do I fix this?
This is caused by update="#form" and expected behavior.
In general, just do not update parts which do not need to be updated and update only those which really need to be updated. E.g. only the result calculated so far and the <h|p:message> of the current input:
<p:ajax update="calculatedResult currentInput_message" />
True, this may end up in a boilerplate of IDs in update attribute in large forms. The PrimeFaces Selectors (PFS, supporting jQuery selector syntax in JSF selectors) may then help a lot in this.
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" />