Hi I've been stuck for sometime getting a modal form to update, it's loading the data, and it's calling the function - it's just not passing the data back to the server
<h:form id="modal">
<p:dialog widgetVar="modalText" styleClass="modalSceneText" modal="true" dynamic="true" >
<p:panel id="sceneText">
<p:inputTextarea id="sceneName" immediate="true" style="width: 200px" rows="1" counter="labelCount" maxlength="20" counterTemplate="{0} characters remaining." value="#{CustomerDashboardController.selectedScene.title}"/><h:outputText id="labelCount" /><br/>
<p:inputTextarea id="sceneDescription" immediate="true" rows="10" cols="50" value="#{CustomerDashboardController.selectedScene.description}" counter="descriptionCount" maxlength="1000" counterTemplate="{0} characters remaining." autoResize="false" /><br/>
<h:outputText id="descriptionCount" />
</p:panel>
<p:ajax event="close" process="#form" immediate="true" update=":form:locationScenes" listener="#{CustomerDashboardController.saveSelectedScene()}" />
</p:dialog>
</h:form>
I've tried it inside and outside the form, I've tried everything I can think off..
The sceneName & sceneDescription are loading the correct data, they're just not saving any changes when the modal/dialog is closed. saveSelectedScene() is being called fine.
EDIT
I can get it to save with a
<p:commandLink value="save" action="#{CustomerDashboardController.saveSelectedScene()}"/>
Which isn't very pretty. Seems the problem is trying to save on the close event.
Your problem here is that the saveSelectedScene() method which is called from the listener in the ajax component is using the old values of the inputTextarea's.
As a workaround you can use a remoteCommand component and call that on your close event instead:
<h:form id="modal">
<p:remoteCommand name="rc" update=":form:locationScenes" actionListener="#{CustomerDashboardController.saveSelectedScene()}" />
<p:dialog widgetVar="modalText" styleClass="modalSceneText" modal="true" dynamic="true" >
<p:panel id="sceneText">
<p:inputTextarea id="sceneName" immediate="true" style="width: 200px" rows="1" counter="labelCount" maxlength="20" counterTemplate="{0} characters remaining." value="#{CustomerDashboardController.selectedScene.title}"/><h:outputText id="labelCount" /><br/>
<p:inputTextarea id="sceneDescription" immediate="true" rows="10" cols="50" value="#{CustomerDashboardController.selectedScene.description}" counter="descriptionCount" maxlength="1000" counterTemplate="{0} characters remaining." autoResize="false" /><br/>
<h:outputText id="descriptionCount" />
</p:panel>
<p:ajax event="close" process="#form" immediate="true" oncomplete="rc()" />
</p:dialog>
</h:form>
Also consider if the immediate="true" are really necessary in your code
Have you tried removing immediate="true" from both input elements and p:ajax tag? It seems to me that you don't need it - especially not on p:ajax tag.
Hope this helps!
Related
I have the following block of code, when i update the "pickList" from the p:remoteCommand it gets updated.
<h:panelGrid columns="1">
<p:panel id="panel" header="Units"
style="margin-bottom:10px; background:#F3F2F2; margin-bottom:0px">
<p:pickList id="pickList"
value="#{AdminController.unitsPickListAll}" var="selectedUnit"
itemLabel="#{selectedUnit}" itemValue="#{selectedUnit}" />
</p:panel>
<h:panelGrid columns="1" styleClass="right-alignment">
<h:panelGroup>
<p:commandButton id="refereshButton" value="#{i18n.refresh}"
immediate="true" action="#{AdminController.getAllUnits}"
oncomplete="rc()" />
<h:outputText value=" " />
<p:commandButton id="saveButton" value="#{i18n.save}"
action="#{AdminController.updateUsedUnits}" />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
<p:remoteCommand name="rc" update="panel" />
But when I use "update" attribute in the "refereshButton", the pickList does not get updated.
Below is the same code but without p:remoteCommand and with update attribute in refereshButton.
<h:panelGrid columns="1">
<p:panel id="panel" header="Units"
style="margin-bottom:10px; background:#F3F2F2; margin-bottom:0px">
<p:pickList id="pickList"
value="#{AdminController.unitsPickListAll}" var="selectedUnit"
itemLabel="#{selectedUnit}" itemValue="#{selectedUnit}" />
</p:panel>
<h:panelGrid columns="1" styleClass="right-alignment">
<h:panelGroup>
<p:commandButton id="refereshButton" value="#{i18n.refresh}"
immediate="true" action="#{AdminController.getAllUnits}"
update="pickList" />
<h:outputText value=" " />
<p:commandButton id="saveButton" value="#{i18n.save}"
action="#{AdminController.updateUsedUnits}" />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
What this reason behind this behavior?
The reason you are getting different results is because you are doing different updates. You update panel from the remote command and pickList from the button.
Use update="panel" on your button to get the same result. This will also save you an Ajax request (and some server load).
I have a p:datascroller configured to display a list of entities and lazy loading them upon clicking the more button.
<h:form id="investigationOperationsForm">
<p:dataScroller
value="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations}"
var="investigationOperation" chunkSize="9" lazy="true"
rowIndexVar="test">
<f:facet name="header">
Scroll down to load investigations
</f:facet>
<h:panelGrid columns="2" style="width:100%"
columnClasses="logo,detail">
<p:commandLink oncomplete="PF('investigationDialogW').show()"
update="investigationEditorForm" immediate="true">
<f:setPropertyActionListener value="#{investigationOperation}"
target="#{investigationManagerBackingBean.selection}" />
<p:graphicImage alt="Investigation Operation"
url="/images/common/investigation-operation.png" />
</p:commandLink>
<!-- h:outputText value="#{investigationOperation.name}" /-->
<p:outputPanel id="pnl">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Name:" />
<h:outputText value="#{investigationOperation.name}"
style="font-weight: bold" />
<h:outputText value="Description:" />
<h:outputText value="#{investigationOperation.shortDescription}"
style="font-weight: bold" />
</h:panelGrid>
<p:draggable for="pnl" />
</p:outputPanel>
</h:panelGrid>
<f:facet name="loader">
<p:outputPanel
visible="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}"
rendered="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}">
<p:commandLink value="More" />
</p:outputPanel>
</f:facet>
</p:dataScroller>
</h:form>
In addition, I have a dialog that pops up when the p:commandLink oncomplete method is executed where I can update the value of the current selection and persist the changes.
<p:dialog id="investigationDialog"
header="#{msg['inv-manager.invDialog.header.title']}"
widgetVar="investigationDialogW" minWidth="400" minHeight="400"
resizable="false" position="center center" modal="true">
<p:panel id="investigationEditorPanel">
<h:form id="investigationEditorForm">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="name"
value="#{msg['inv-manager.invDialog.nameFieldLabel']}" />
<p:inplace id="nameInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.name}"
id="name" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.nameFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="shortDescription"
value="#{msg['inv-manager.invDialog.shortDescriptionFieldLabel']}" />
<p:inplace id="shortDescriptionInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.shortDescription}"
id="shortDescription" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.shortDescriptionFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="description"
value="#{msg['inv-manager.invDialog.descriptionFieldLabel']}" />
<p:inputTextarea id="description" required="false"
label="#{msg['inv-manager.invDialog.descriptionFieldInputLabel']}"
immediate="true"
value="#{investigationManagerBackingBean.selection.description}" />
<p:commandButton id="okButton"
value="#{msg['inv-manager.invDialog.okButton']}" type="submit"
partialSubmit="true" process="investigationEditorForm"
action="#{investigationManagerBackingBean.createOrUpdate()}"
onclick="dlg.hide();" />
</h:panelGrid>
</h:form>
</p:panel>
</p:dialog>
The backing bean is configured to be #ViewScoped and everything works as defined. However, upon update the values of the p:datascroller are reset and the load method of the lazy loading model is executed and the datascroller is repopulated with new values from the database.
I have no reference to the datascroller or its containing form in the p:dialog and am wondering why the datascroller is being updated automagically? What am I missing in the equation. Have I overlooked something or something specific to the p:datascroller model that I need to consider when following this approach?
Look forward to the expertise of the community in resolving this issue.
Many thanks in advance :)
I have a PrimeFaces dialog, that has two command buttons that executes some code in the backing bean. I want to block the dialog within the action.
I managed to do it using blockUI, but when the blockUI is present, and I open the dialog, it appears at the bottom of the page.
If I remove the blockUI component, the dialog opens at the center of the page, as I want. But I want it to be centered and with the blockUI.
<p:dialog header="Attention" id="dialog" position="center"
widgetVar="dialog" modal="true" closable="false"
dynamic="true" closeOnEscape="false">
<div class="internal-margin-top">
<h:outputText value="Location" styleClass="ui-outputtext" />
<p:inputText value="#{activityBean.location}"
id="inputLocation" maxlength="15">
</p:inputText>
</div>
<div class="internal-margin-bottom">
<p:commandButton id="closureYes" value="Yes"
styleClass="btn-green"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processItem()}" process="#all">
</p:commandButton>
<p:commandButton id="closureNo" value="No"
styleClass="btn-red"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processActivity()}" process="#all" />
</div>
</p:dialog>
<p:blockUI block="scrapDialog" widgetVar="block">
<p:graphicImage library="images" name="loading_bar.gif" />
</p:blockUI>
Thanks in advance.
Example with a centered modal dialog:
<p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
<h:form id="dialogform">
<p:panelGrid columns="1">
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
</p:panelGrid>
<p:commandButton id="closebutton"
value="Close"
oncomplete="PF('wv_dialog').hide();"
action="#{testBean.actionTest()}"
process="#form"/>
<p:blockUI block="dialogform" trigger="closebutton"/>
</h:form>
</p:dialog>
I have a view which is working well. However, when I add a required="true" into the body of the view, the view begin to be unable to read backing bean properly. Below is a comparison:
Anyone knows why?
.
Edit: Code fragment supplement
Below is the fragment of my code in which the problem arises. If I add required="true" into any p:inputText (not only the p:inputText that belong to this dialog but any p:inputText inside the html body), it stops displaying information from backing bean, remove it and everything works just fine.
<p:dialog header="Customer Editor" widgetVar="customerEditDialog"
resizable="false" id="customerEditDlg" showEffect="fade"
hideEffect="fade" modal="true">
<h:panelGrid id="editGrid" columns="2" cellpadding="4"
style="margin:0 auto;">
<h:outputLabel for="customerNameEdit" value="Name: " />
<p:inputText id="customerNameEdit" maxlength="30"
value="#{customerController.customerAdd.name}" />
<h:outputLabel for="customerPhoneNumberEdit" value="Phone Number " />
<p:inputText id="customerPhoneNumberEdit" maxlength="15"
onkeypress="if(event.which < 48 || event.which > 57) return false;"
value="#{customerController.customerAdd.phoneNumber}" />
<h:outputLabel for="customerEmailEdit" value="Email: " />
<p:inputText id="customerEmailEdit" maxlength="49"
value="#{customerController.customerAdd.email}" />
<h:outputLabel for="customerAddressEdit" value="Address: " />
<p:inputText id="customerAddressEdit" maxlength="190"
value="#{customerController.customerAdd.address}" />
<f:facet name="footer">
<div style="text-align: right">
<p:commandButton id="editCustomerButton"
update=":form:customerList, :form:messages"
oncomplete="customerEditDialog.hide()" value="Save"
actionListener="#{customerController.editCustomer()}">
</p:commandButton>
<p:commandButton id="cancelEditCustomerButton" update=":form"
onclick="customerEditDialog.hide()" value="Cancel">
</p:commandButton>
</div>
</f:facet>
</h:panelGrid>
</p:dialog>
See if jsf required=true destroys setPropertyActionListener? helps you.
The problem is most likely that the setter in your bean is not to be called because of validation errors somewhere else or you are nesting <h:form> elements.
Let's say as for an example, I have some input fields like,
<p:panel id="panel" closable="false" toggleOrientation="horizontal" toggleable="true" header="New">
<p:focus context="panel"/>
<p:watermark for="txtCountryName" value="Enter a valid country name."/>
<p:watermark for="txtCountryCode" value="Enter a valid country code."/>
<p:messages id="systemMessages" globalOnly="true" redisplay="false" showDetail="true" showSummary="true" autoUpdate="false" closable="true"/>
<p:messages id="specificSystemMessages" for="paramId" globalOnly="false" redisplay="false" showDetail="true" showSummary="false" autoUpdate="false" closable="true"/>
<h:panelGrid id="panelGrid" columns="3" cellpadding="5">
<p:outputLabel for="txtCountryName" value="Country"/>
<p:inputText id="txtCountryName" value="#{countryManagedBean.txtCountryName}" label="Country name" required="true" maxlength="45">
<f:validateLength minimum="2" maximum="45"/>
</p:inputText>
<p:message for="txtCountryName" showSummary="false"/>
<p:outputLabel for="txtCountryCode" value="Country Code"/>
<p:inputText id="txtCountryCode" value="#{countryManagedBean.txtCountryCode}" required="true" maxlength="45" label="Country code">
<f:validateLength minimum="2" maximum="45"/>
</p:inputText>
<p:message for="txtCountryCode" showSummary="false"/>
<p:commandButton id="btnSubmit" update="dataTable panel messages" actionListener="#{countryManagedBean.insert}" icon="ui-icon-check" value="Save"/>
</h:panelGrid>
</p:panel>
And a DataTable as follows.
<p:panel id="dataTablePanel" toggleable="true" toggleOrientation="horizontal" closable="false" header="Data">
<p:dataTable id="dataTable" var="row" value="#{countryManagedBean}"
lazy="true"
pageLinks="10"
paginator="true"
sortMode="multiple"
resizableColumns="true"
sortOrder="descending"
editable="true"
filterEvent="keyup"
selection="#{countryManagedBean.selectedValues}"
rowsPerPageTemplate="5,10,15"
rows="10"
rowKey="#{row.countryId}"
rowIndexVar="rowIndex"
rowStyleClass="#{row.countryId eq countryManagedBean.id? 'selected-data-row' : null}"
editMode="row">
...
...
...
</p:dataTable>
</p:panel>
When this command button,
<p:commandButton id="btnSubmit" update="dataTable panel messages" actionListener="#{countryManagedBean.insert}" icon="ui-icon-check" value="Save"/>
is clicked, a row is added to the underlying database, if it satisfies all of the validation rules and the DataTable is updated using the update="dataTable panel messages" attribute.
I would like updating this DataTable if and only if all the validation criteria as specified on these input fields are satisfied and the row is actually created.
If anyone of these validation rules fails, then this DataTable should not be updated anymore which is quite unnecessary and causes some costly JPA criteria and/or JPQL queries to be executed. Is this possible, how?
It is Primefaces 3.5.
Try using remotecommand in that case.
Change your submit button as shown below.
<p:commandButton id="btnSubmit" action="#{countryManagedBean.insert}" icon="ui-icon-check" value="Save" oncomplete="handleRequest(xhr, status, args)"/>
Add p:remoteCommand as shown below.
<p:remoteCommand name="updateTable" update="dataTable">
This remote command will be used for updating your table.
And yes, add below js.
<script type="text/javascript">
function handleRequest(xhr, status, args) {
if(!args.validationFailed) {
updateTable();
}
}
</script>
HTH
try to add this code to your bakedbean countryManagedBean at the end of the insert function or whereever you check the validation.
RequestContext context = RequestContext.getCurrentInstance();
context.addCallbackParam("validationFailed", "true");
This creates The callback param that you check with the javascript.