I need to give my users a visual feedback when I load/save something so that they know the system is still working. How can I easily create such a feedback?

asked 07.10.2013 at 14:30

SupportIvyTeam's gravatar image

SupportIvyTeam ♦♦
1.4k102118122
accept rate: 77%

edited 08.10.2013 at 14:33


PrimeFaces offers 2 components for this, p:ajaxStatus and p:blockUI. See the following example form in the Html Dialog:

<h:form>
        <p:panel header="p:ajaxStatus and p:blockUI Demo" id="panel">
                <p:panelGrid columns="1">
                        <p:ajaxStatus style="width:220px;height:19px;">
                                <f:facet name="start">
                                        <h:graphicImage library="ivy-cms" name="Images/loader" />
                                </f:facet>

                                <f:facet name="complete">
                                        <h:outputText value="Done!" />
                                </f:facet>
                        </p:ajaxStatus>
                        <p:commandButton id="btn" value="Trigger ajaxStatus and blockUI"
                                actionListener="#{logic.doSomething}" />
                        <p:commandButton value="Do not trigger ajaxStatus and blockUI"
                                actionListener="#{logic.doSomething}" global="false"/>

                </p:panelGrid>
        </p:panel>
        <p:blockUI block="panel" trigger="btn">
                LOADING<br />
                <h:graphicImage library="ivy-cms" name="Images/loader2" />
        </p:blockUI>
</h:form>


In lines 4 to 12 you see how to configure p:ajaxStatus. It is triggered every time when a AJAX request is fired, e.g. when a p:commandButton is pressed. As soon as the request is fired, the content of the start facet is shown. As soon as the request ends, the content of the complete facet is displayed.

If you wish not to trigger p:ajaxStatus on a p:commandButton, then you have to set the global attribute to false like in line 15.

p:blockUI does work differently, Here you have to define which components are blocked (block="panel") and which component triggers the block (trigger="btn"). See lines 20 to 23.

Any content can be used inside p:ajaxStatus or p:blockUI.

Progress with p:ajaxStatus and p:blockUI

For more insight, please get the example project or have a look at the demos for p:ajaxStatus and p:blockUI on the PrimeFaces Showcase.



Note: This question and answer was originally posted by Heinrich Spreiter on his Xpert.ivy Hacker blog. Many thanks to Henry for his enthusiastic work.

link

answered 07.10.2013 at 15:15

SupportIvyTeam's gravatar image

SupportIvyTeam ♦♦
1.4k102118122
accept rate: 77%

edited 08.10.2013 at 14:18

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "Title")
  • image?![alt text](/path/img.jpg "Title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×58
×51

Asked: 07.10.2013 at 14:30

Seen: 22,848 times

Last updated: 08.10.2013 at 14:33