Using AJAX with Java EE web app Part II

The are two basic ways of adding Asynchronus Javascript resources ( AJAX ) to Java EE web app
1. Using the f:ajax tag along with the facelets tag : This method requires no additional configuration or coding…
2. Using jsf.ajax.request(s,e,o); , this method allows customized control of component…. Where s = source , e = event , o = option
Example 1 : Using Method 1
Create login.html

<!Doctype html >

<html lang ="en"
xmlns:jsf="" >

<title> Login </title>

<f:ajax execute ="#{app.loginName}" render="@all" onerror="@all" ... >

<h:form name="#{app.loginName}" id="#{app.loginId}" ... >


<input type="text" jsf:id="#{app.nameID}" name="#{app.uNameTxt}" value="#{app.userName}" required="required" requiredMessage="#{req.userName}" errorMessage="#{error.userName}" >
<f:validateRegex pattern="#{val.userName}" for="#{app.nameID}" />


<input type="password" jsf:id="#{app.pwdID}" name="#{app.pwdTxt}" value="#{app.userPwd}" required="required" requiredMessage="#{req.userPwd}" errorMessage="#{error.userPwd}" > 
<f:validateRegex pattern="#{val.userPwd}" for="#{app.pwdID}" />

<br/> <input type="submit" jsf:action="#{app.submitLogin(app.userName, app.userPwd )" value="#{app.submitTxt}" />





public class App
    private String userName, userPwd, uNameTxt="Username", pwdTxt="Passsword", pwdID="password",uNameID="userName";

    public String getUserName()
        return userName;

    public void setUserName(String newUName)

        this.userName = newName;





    public classs Validate
public String userName="[a-zA-Z0-9]{5,15}", userPwd="[a-zA-Z0-9]{10,}";


Example 2 : Using Method 2 ( jsf.ajax.request(s,e,o);

Where s = source , e = event , o = option
Step 1 : Identify or make a reference call to your Javascript resources using

<h:outputScript name="imageLoader.js" library="javascript location example myjslib or" target="head" >

<input type="submit" jsf:action="#{app.submitLogin(app.userName, app.userPwd )" value="#{app.submitTxt}"

onclick="jsf.ajax.request( this, event, {execute:'userName','userPwd',render"app.submitLogin(app.userName,app,userPwd)"})"
return false />

The source parameter identifies the DOM element that triggered the Ajax
request, typically this.
The optional event parameter identifies the DOM event that
triggered this request.
The optional options parameter contains a set of name/value

Lastly, Loading the js in the BeanClass

@ResourceDependency(name=”app.js” library=”javax.faces” target=”head”)
I hope you enjoy this. Have you read The Software Developer Joke ?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at

Up ↑

%d bloggers like this: