1. Put the ajaxanywhere-1.2-RC2.jar
in WEB-INF/lib folder. The ajaxanywhere.tld is included in the JAR. The
TLD file tells the JSP/JSF framework where to look for uri http://ajaxanywhere.sourceforge.net/.

2. Modify web.xml, including
following lines in front of filters currently defined in the file:

  <filter>
      <filter-name>AjaxAnywhere</filter-name>
      <filter-class>org.ajaxanywhere.AAFilter</filter-class>
  </filter>

<filter-mapping>
      <filter-name>AjaxAnywhere</filter-name>
      <url-pattern>*.jsf</url-pattern>
  </filter-mapping>

  <filter-mapping>
      <filter-name>AjaxAnywhere</filter-name>
      <url-pattern>*.do</url-pattern> <!-- default Struts mapping -->
  </filter-mapping>

  <filter-mapping>
      <filter-name>AjaxAnywhere</filter-name>
      <url-pattern>*.htm</url-pattern> <!-- other framewords mapping-->
  </filter-mapping>

3. Download the demo ajaxAnywhereDemo-1.2-RC1.war package. Use jar to
extract the PostingStep1Form.java and put it
in your JSF project

4. Modify the faces-global.xml to include one bean defination:

  <managed-bean>  
   <managed-bean-name>postingStep1Form</managed-bean-name>  
   <managed-bean-class>com.compan.demo.PostingStep1Form</managed-bean-class> 
   <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>

5. On your JSF page, add following lines as highlighted:

<?xml version="1.0"?>
<jsp:root version="2.0"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:aa="http://ajaxanywhere.sourceforge.net/" />

 <jsp:directive.page contentType="text/html"/>

... ...
 <f:verbatim><![CDATA[

 <script src="aa.js"></script>
 <script>
 ajaxAnywhere.formName="main";
 </script>

 ]]> </f:verbatim>

<h:outputText value="AjaxAnywhere JSF Testing"/>

 <aa:zoneJSF id="letterst">
 <h:selectOneListbox styleClass="selectListBoxStyle"
 size="10"
 value="#{postingStep1Form.selectedCategoryId1}"
 valueChangeListener="#{postingStep1Form.onSelectCategoryValueChange1}"
 id="categoryId1"
 onchange="ajaxAnywhere.submitAJAX();"
 required="true">
 <f:selectItems value="#{postingStep1Form.categorySelectItems1}" id="categorySelectItem1"/>
 </h:selectOneListbox>
 </aa:zoneJSF>

 <aa:zoneJSF id="categoryList">
 <h:selectOneListbox styleClass="selectListBoxStyle"
 size="10"
 value="#{postingStep1Form.selectedCategoryId2}"
 id="categoryId2"
 disabled="true"
 required="false">
 <f:selectItems value="#{postingStep1Form.categorySelectItems2}" id="categorySelectItem2"/>
 </h:selectOneListbox>
 </aa:zoneJSF>

 <f:verbatim>
 &lt;span id=cnt&gt;0</span&gt; seconds since last page refresh.
 <script>
 var sec=100;
 function counter(){
 setTimeout("counter();",1000); document.getElementById("cnt").innerHTML = sec++;
 }
 counter();
 </script>
 </f:verbatim>

</jsp:root>

Can you put the HTML <div> tag around the JSF tag as below?

<div>
<f:outputText value="Hello, the world!"/>
</div>


Apprently above code won't work. To add raw HTML tags on the JSF page, you need to include the escaped HTML page in the <f:verbatim> JSF tag.


<f:verbatim>&lt;div&gt;</f:verbatim>
<f:outputText value="Hello, the world!"/>
<f:verbatim>&lt;/div&gt;</f:verbatim>