Here is how we do it (example):
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/sandbox" prefix="s" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
...
<body>
<f:view>
<a4j:region selfRendered="true">
<h:form id="selectCityForm">
<h:selectOneMenu id="selectCityMenu" value="#{cityHandler.city}" converter="CityBeanConverter">
<a4j:support event="onchange" reRender="editCityPanel" />
<f:selectItems value="#{cityHandler.allCities}" />
</h:selectOneMenu>
<a4j:commandButton id="loadButton"
action="#{cityHandler.ajaxFormSubmit}"
reRender="editCityPanel" value="Load"/>
<a4j:status startText=" Requesting..." startStyle="color:red" stopText=" Done" stopStyle="color:blue"/>
<h:selectBooleanCheckbox id="selectFilter" value="#{cityHandler.hideAlreadySetLatLng}">
<a4j:support event="onchange" reRender="selectCityForm"/>
</h:selectBooleanCheckbox>
</h:form>
...
The form (can be other elements) which gets updated:
...
<h:form id="editCityPanel" style="padding-top: 0.5cm;">
<h:outputLabel id="cityNameLbl" value="Name" for="cityName"/>
<h:inputText id="cityName" value="#{cityHandler.city.name}" required="true" />
</h:form>
Notice there is <a4j:status/> for better feedback. reRender attributes of <a4j:support /> and <a4j:commandButton /> specify id's of elements that need to be rerendered after the actions got triggered.
