JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Primefaces AjaxStatus Example

April 13, 2014 by Amr Mohammed Leave a Comment

AjaxStatus is a global notifier for ajax requests, it uses facets to represent the request status. Most common used facets are start and complete. Start facet will be visible once the ajax request begins and stay until it’s completed. Once the ajax response is received and page is updated, start facet gets hidden and complete facet shows up.

  • Read : PrimeFaces Tutorials

1. AjaxStatus Tag Info

AjaxStatus General Info

2. AjaxStatus Attributes

AjaxStatus Attributes

3. AjaxStatus Events

AjaxStatus component is listening the following phases:

  • default: Initially visible when page is loaded.
  • start: Before ajax request begins.
  • success: When ajax response is received without error.
  • error: When ajax request is received with error.
  • complete: When everything is finishes.

4. Managed Bean

AjaxStatus.java

[code lang=”java”]
package net.javabeat.primefaces;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.AjaxBehaviorEvent;

@ManagedBean
@SessionScoped
public class AjaxStatus {
private String message = "";

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}

public void listener(AjaxBehaviorEvent e) throws Exception{
Thread.sleep(5000);
System.out.println(e);
}

public String printMessage(){
return "";
}
}
[/code]

5. The View

index.xhtml

[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces AjaxStatus – Example</h2>
<h:outputText value="Type a message: "/>
#{‘ ‘}
<p:inputText id="in" value="#{ajaxStatus.message}">
<p:ajax process="in out" update="out" event="keyup" listener="#{ajaxStatus.listener}"></p:ajax>
</p:inputText>
#{‘ ‘}
<p:outputLabel id="out" value="#{ajaxStatus.message}"/>
<br/>
<br/>
</h:form>
<p:ajaxStatus id="startAjax">
<f:facet name="start">
<h:graphicImage value="#{resource[‘images:ajax-loader.gif’]}"></h:graphicImage>
</f:facet>
<f:facet name="complete">
<h:graphicImage value="#{resource[‘images:ajax-complete.gif’]}"></h:graphicImage>
</f:facet>
</p:ajaxStatus>
</f:view>
</html>
[/code]

6. Primefaces AjaxStatus Demo – Declarative Approach

The below snapshots shows you the using of AjaxStatus primefaces component for achieving listening for different phases on Ajax Request-Response.
Primefaces AjaxStatus Start Phase
Primefaces AjaxStatus Complete Phase

7. Programmatic Approach

Facets are the declarative way to use, if you would like to implement advanced cases with scripting you can take advantage of callbacks which are the event handler counterparts of the factes.

8. The View (AjaxStatus Using Programmatic Approach)

index.xhtml

[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces AjaxStatus – Example</h2>
<h:outputText value="Type a message: "/>
#{‘ ‘}
<p:inputText id="in" value="#{ajaxStatus.message}">
<p:ajax process="in out" update="out" event="keyup" listener="#{ajaxStatus.listener}"></p:ajax>
</p:inputText>
#{‘ ‘}
<p:outputLabel id="out" value="#{ajaxStatus.message}"/>
<br/>
<br/>
</h:form>
<p:ajaxStatus id="startAjax" onstart="PF(‘start’).show();" oncomplete="PF(‘start’).hide();">
</p:ajaxStatus>
<p:dialog widgetVar="start">
<h:graphicImage value="#{resource[‘images:ajax-loader.gif’]}"></h:graphicImage>
</p:dialog>
</f:view>
</html>
[/code]

9. Primefaces AjaxStatus – Programmatic Demo

Primefaces AjaxStatus Programmatic Way

10. Important Notes

When you come to use the AjaxStatus be sure that you are aware about the following major points:

  • Avoid updating AjaxStatus itself to prevent duplicate facet/callback bindings.
  • Provide a fixed width/height to inline ajaxStatus to prevent page layout from changing.
  • Components like commandButton has an attribute (global) to control triggering of AjaxStatus.
  • AjaxStatus also support core JSF ajax request of f:ajax as well.

[wpdm_file id=63]

Filed Under: JSF Tagged With: PrimeFaces

About Amr Mohammed

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved