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>
Related
I have written this code
<a4j:ajax event="valueChange" render="second,third" immediate="true" />
I want to display a progreess bar or 'Loading...' image while we are getting the response from server.
Is there a component availble that will allow us to do this?
A component already exists within the a4j library. Use the <a4j:status> component. Say you're loader (animated gif) is called ai.gif, then your code would look like this.
<a4j:status>
<f:facet name="start">
<h:graphicImage value="/images/ai.gif" alt="ai" />
</f:facet>
<f:facet name="stop">
<!-- no image; successfully loaded, or could display a checkmark or something -->
</f:facet>
</a4j:status>
See Also
RichFaces Showcase - Ajax Output/Containers
RichFaces Dev Guide - JBoss
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 am wrirting a captcha code for my jsf project. I have done almost everything but the problem is the refreshing og the image. I'd like to do it with ajax so that when I click the image, it be replaced by new one. But when I click it the image doesn't get updated. But it is updated after reloading the page.
<h:form>
<h:commandLink>
<h:graphicImage value="/captcha/test.png"
style="width:35mm;height:2cm;" />
<f:ajax render="#all" listener="#{captcha.recaptcha()}"></f:ajax>
</h:commandLink>
</h:form>
every time I click the image , it is changed on disk but not updated in the html page.
Thanx for any useful responses !
Try the following code using execute and render tags
<h:form>
<h:commandLink>
<h:graphicImage value="/captcha/test.png" style="width:35mm;height:2cm;" />
<f:ajax render="#form" execute="#form" listener="#{captcha.recaptcha()}" />
</h:commandLink>
</h:form>
You have need to use update attribute.
take a look-
<h:form id="form1">
<h:commandLink>
<h:graphicImage value="/captcha/test.png"
style="width:35mm;height:2cm;" id="img1"/>
<f:ajax render="#all" listener="#{captcha.recaptcha()}" update=":form1:img1"></f:ajax>
</h:commandLink>
</h:form>
Hope this will work
<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.
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()"