Saturday, September 08, 2012

JSF 2.1 Tip of the Day: Using <f:ajax/> to Update Element Outside A Form

A JSF forum question was asked on how to update a JSF element outside of a <h:form/> element. This is one solution using <f:ajax/>.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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">
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <h:head>
        <title><f:ajax/> Example</title>
    </h:head>
    <h:body>
        <!-- Outside of a form element -->
        <h:outputText id="text" value="#{indexBean.checked}"
                      style="font-size: 24px; color: red; font-weight: bolder; font-variant: small-caps; "/>
 
        <h:form id="form1" prependId="false">
            <f:ajax render="cbox :text">
                <h:selectBooleanCheckbox id="cbox" value="#{indexBean.checked}"/>
            </f:ajax>
        </h:form>
    </h:body>
</html>

0 comments :

Popular Posts