<p:dialog widgetVar="dlgEdit" header="Add New Status">
<h:form id="editFrm">
<h:panelGrid columns="3" id="pnlEdit">
<p:outputLabel value="Status"/>
<p:inputText id="txtStatus" required="true"/>
<p:message for="txtStatus" />
</h:panelGrid>
</p:dialog>
This is a primefaces message tag which is not rendered in dialog.
And dialog is hide on onComplete event..
How can I RENDER validation message in DIALOG using jsf?
Thank for any suggestion !
In your submit button add these entries
ajax="true" update=":#{p:component('message')}" oncomplete="if(!args.validationFailed)dlgEdit.hide();"
This will print your message in the same dialog.
Is it ok if your validation message is displayed in the parent page?
If yes, in that case you can throw a feedback error message. This will be picked up by the p:message in your parent page.
If no, please refer to this question below in this link for dialog window with ajax=false situation.
Related
I want to pass data to back bean through ajax call on command button click.
I have a form with couple of input text fields where each field is having ajax blur event.
Every thing is working fine in happy flow except in the flowing scenario.
Ajax blur event is invoking when i directly clicking on submit which is suppose to be happen before submit click, hence i should make another click on submit button to invoke ajax call to save my form.
Here is the code.
Input text fields:
<p:inputText id="txt_name"
value="#{partnerVO.partnerName}"
required="true" maxlength="30"
rendered="#{!partnerVO.isReadOnly}">
<p:keyFilter regEx="/[A-Za-z0-9#.,&- ]/i"
for="txt_name" preventPaste="false" />
<p:ajax update="txt_name" event="blur" />
</p:inputText>
<p:inputText id="txt_assigned"
value="#{partnerVO.assignedName}"
required="true" maxlength="30"
rendered="#{!partnerVO.isReadOnly}">
<p:keyFilter regEx="/[A-Za-z0-9#.,&- ]/i"
for="txt_assigned" preventPaste="false" />
<p:ajax update="txt_assigned" event="blur" />
</p:inputText>
Command Button:
<p:commandButton id="btn_save"
title="Save"
value="#{lbl['tpdetails.remove.additional.address']}"
update="#form" process="#this"
action="#{partnerDetailsController.save}">
</p:commandButton>
I'm using JSF 2.2
Please provide some suggestions to overcome this strange behavior.
Note: omitted form related code here.
I want to display message or image when loading the data.
Please suggest.
You can use
<p:ajaxStatus>
Here is an example which shows a dialog as long as the ajax-request is loading. You can trigger the ajax-event with
<p:ajax event="tabChange">
Example that shows a .gif inside of a dialog:
<p:ajaxStatus styleClass="ajaxLoader" onstart="blockUI.show();" oncomplete="blockUI.hide();">
</p:ajaxStatus>
<p:dialog id="ajaxDialog" widgetVar="blockUI" modal="true">
<h:graphicImage value="/path/ajax-loader.gif" />
</p:dialog>
Render works fine during initial load of the page, but once the form has been submitted and some component failed a validation re-render does not trigger, the panel does not show and hide anymore and page must be refreshed again. I'm still new with jsf.
Sample Code
<p:selectOneRadio id="accommodationOptions" value="#{travelRequestMBean.accommodationOptions}">
<f:selectItem itemLabel="#{field['accord3Radio2']}" itemValue="2" />
<f:selectItem itemLabel="#{field['accord3Radio1']}" itemValue="1" />
<f:ajax render="panelMoreAccommodation2"/>
</p:selectOneRadio>
<p:panel id="panelMoreAccommodation2" widgetVar="panelMoreAccommodation2"
visible="#{travelRequestMBean.accommodationOptions == 1}" closable="true" toggleable="true">
<p:graphicImage url="/images/hotel-noun_project_4398.svg" alt="#{field['accord3Label2']}" height="24px" />
<h:outputText value="#{field['accord3Label2']}" />
</p:panel>
Also I have tried the other variant of this using a boolean attribute in the backing bean with an ajax event on the selectoneradio, result was still the same and panel does not do anything.
I can't see where you validate your inputs. But take a look at http://www.primefaces.org/showcase/ui/csv/basic.xhtml with the combination of
update=":panelMoreAccommodation2"
And instead of visible use render.
Finally having some tweaks, the problem was this attribute on the target panel
closable="true"
After removing this attribute the ajax update worked again even after a submit with a failed validation.
I have noticed that pretty much all PF components that have 'dynamic' attribute set to 'true' will only show up after a short delay (which is understandable), and also will not trigger ajax start/stop event.
This is my (perfectly working) Ajax status component, actual dialog contents omitted for brevity:
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" onerror="errorDialog.show();"/>
This is a dynamically loaded dialog. It needs to get data from backing beans:
<p:dialog modal="true" widgetVar="confDialog" position="center" id="confD" dynamic="true">
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="Date"></h:outputText>
</p:column>
<p:column>
<h:outputText value="#{myBean.currentDate}">
<f:convertDateTime locale="#{myBean.currentLanguage}" type="both" dateStyle="full" timeStyle="full" timeZone="#{myBean.currentTimeZone}"></f:convertDateTime>
</h:outputText>
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton value="Close" type="button" onclick="confDialog.hide();">
</p:commandButton>
</p:dialog>
A commandbutton that does something and displays dynamically loaded confirmation dialog:
<p:commandButton value="Do it" type="submit" ajax="true" process="#form"
action="#{bean.processForm}"
oncomplete="if(!args.validationFailed){confDialog.show();}"
update="confD #form"/>
Ajax status dialog is displayed while the commandbutton submits the data to backing bean and gets data back. Then ajax status dialog disappears, there is a delay of 1-2 seconds, and confirmation dialog is shown.
The same happens with dynamically loaded tabs (in PF tabView component).
Why isn't my ajax status dialog displayed during dynamic component load? How can I show it?
EDIT:
thanks to #partlov I figured out a solution without overriding PF function, by adding JQ ajax start/stop handler to the dynamically loaded dialog:
jQuery(document).ready(function() {
confDialog.getJQ().ajaxStart(function(){statusDialog.show()});
confDialog.getJQ().ajaxStop(function(){statusDialog.hide()});
});
As written in Primefaces documentation <p:ajaxStatus> just intercepts global AJAX requests, and this request is not global. There is no easy way to do this what you want. As time of loading of dialog is short I really don't see point for this. Only solution, as I think, is to overload Primefaces dialog JavaScript methods.
Primefaces calls loadContents() method when dialog content is loaded so you can override this method for this. I don't advice you to do that, because this is undocumented and can be changed in future versions of Primefaces:
jQuery(document).ready(function() {
var oldLoadContents = PrimeFaces.widget.Dialog.loadContents;
PrimeFaces.widget.Dialog.loadContents = function() {
statusDialog.show();
oldLoadContents();
}
});
This should show your dialog on dynamic loading. You can use onShow attribute of p:dialog to close your dialog:
onShow="statusDialog.hide()"
I have the following piece of code inside a form:
<p:panel id="panel" header="lalalala">
<h:panelGrid columns="5">
<h:outputLabel value="Enter name" for="name" />
<p:inputText id="name" value="#{userBean.name}"
required="true" label="name" maxlength="15"
validatorMessage="oops"
requiredMessage="ooopps">
<f:validateRegex
pattern="^somepattern$">
</f:validateRegex>
<p:ajax event="blur" update="inputValidationMessage" />
</p:inputText>
<p:message id="inputValidationMessage" showSummary="false"
for="name" />
<p:watermark for="name" value="eg. John" />
</h:panelGrid>
<p:commandButton id="submitButton" value="Submit" update="panel"
actionListener="#{userBean.save}"
onclick="handleOnclick"
oncomplete="handleAjaxResponse(xhr, status, args)">
</p:commandButton>
<p:messages autoUpdate="true" globalOnly="true" showDetail="true" />
</p:panel>
So the validation messages work well on the inputText element. But the submit button is still making an Ajax request when clicked, even though the input is invalid. I want the Ajax request to be sent iff the inputText is valid.
How do I do that?
Furthermore; there is another case I'd like to deactivate the button. This is the case where inputText is validated and the user clicks the button. The reason for this one is, I don't want the user to mistakenly flood requests. (i.e repeatedly press the submit button)
Currently, the handleOnclick javascript function only shows a modal dialog box saying "wait". Since that dialog is modal, the background is inaccessible. However, that still doesn't prevent the user from pressing it repeatedly because 1 second passes between onclick and modal dialog showing. Furthermore; this approach doesn't prevent submitting invalid data. What can you suggest?
I use JSF2.0 and Primefaces 3.0.
Any help appreciated.
You can use the button's disabled attribute for it. Just set it to true whenever FacesContext#isPostback() returns false (so, it's an initial request), or when it's true (so, a form submit has occurred), then check if FacesContext#isValidationFailed() returns true (so the validation has failed in general).
<p:commandButton ... disabled="#{not facesContext.postback or facesContext.validationFailed}" />
You only need to ensure that you update the button on ajax requests as well, so that it will reappear either enabled or disabled when necessary.
<p:ajax event="blur" update="inputValidationMessage submitButton" />