Display Custom JSF AJAX onerror event example

In this tutorial we will show you how to create a custom JSF AJAX onerror event. When the javax.faces.PROJECT_STAGE is set to Development you receive an popup every time an error occurs during an ajax processing. When the javax.faces.PROJECT_STAGE is set to Production you don’t receive anything. This is not what we want. If something goes wrong we want to inform the user about it. Let’s see how to create a custom onerror event for AJAX processing.

Processing Managed Bean

First let’s start with a managed bean that produces an error.

package com.memorynotfound;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class ProcessingBean {

    public void processing() {
        throw new RuntimeException("Error while processing data");
    }
}

Display custom JSF AJAX onerror message

We can bind an onerror listener in 2 ways:

  1. By adding a function to the onerror attribute on the <f:ajax> element. This will only bind the function to that specific action.
  2. Or you can add a global onerror listener using the jsf.ajax.addOnError(displayErrorMessage) method.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
    <h:outputScript library="js" name="custom-script.js"/>
    <h:outputScript library="javax.faces" name="jsf.js"/>
    <script type="text/javascript">
        //jsf.ajax.addOnError(displayErrorMessage);
    </script>
</h:head>
<h:body>

    <h2>JSF 2: onerror ajax</h2>

    <h:form>
        <pre id="error-messages"></pre>

        <h:commandButton value="Submit" actionListener="#{processingBean.processing}">
            <f:ajax render="@form" onerror="displayErrorMessage" />
        </h:commandButton>
    </h:form>

</h:body>
</html>

Display Error Message

We have a variable named data which contains the information about the response. In this example we simple display all the data on the page.

Info: When the javax.faces.PROJECT_STAGE is set to Development you receive extra information about the error that occurred than when the project stage is set to Production. See screenshots for more information, not the subtle changes e.g.: the content of the error message.
function displayErrorMessage(data) {
    document.getElementById("error-messages").innerText =
        "Error Description: " + data.description
        + "\nError Name: " + data.errorName
        + "\nError errorMessage: " + data.errorMessage
        + "\nResponse Code: " + data.responseCode
        + "\nResponse Text: " + data.responseText
        + "\nStatus: " + data.status
        + "\nType: " + data.type;
}

Demo

URL: http://localhost:8081/jsf-ajax-onerror/

Custom JSF AJAX onerror event

Here javax.faces.PROJECT_STAGE is set to Development.

Custom JSF AJAX onerror event development

Here javax.faces.PROJECT_STAGE is set to Production.

Custom JSF AJAX onerror event production

References

Download

Download it ! – jsf ajax onerror example

You may also like...