In JSF 2.0, there are tags added to make AJAX calls easy. Without further ado:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
<h:head>
<h:outputScript name="jsf.js" library="javax.faces" target="body"></h:outputScript>
<title>Ajax</title>
</h:head>
<h:body>
<f:view contentType="text/html; charset=UTF-8">
<h1>Hello Ajax World!</h1>
<h:form id="form">
<h:inputText id="name" value="#{nameMBean.name}"/>
<h:commandButton value="Reverse name via Ajax!">
<f:ajax execute="name" render="reverseName"/>
</h:commandButton>
<h:outputText id="reverseName" value="#{nameMBean.reverseName}"/>
</h:form>
</f:view>
</h:body>
</html>
First things first. To use AJAX in JSF 2.0, we have to attach jsf.js file (line 8). Then we are ready.
Most interesting is line 18. <f:ajax> added to command button makes AJAX action fire when button is pressed. We could as well put it into <h:inputText> element, then it would fire on change of text inside (onchange event).
Parameter execute tells JSF which parts it should send to server for model update. This could be also form, for all the parameters in the form, or list of element ids separated by space. Parameter render denotes which parts of view should be rerendered after receiving AJAX response. Here we can also put more than one.
We can put more parameters to <f:ajax>, like event, where we can specify on which event AJAX action should occur (not necessarly click event), or listener, where we can call some method on managed bean.
1 comment:
Keep sharing more informative posts like that,
AngularJS development Company
Post a Comment