Dependent List Example

Let us make a dependent list example with AjaxAnywhere.

We will take as a starting point a traditional JSP solution. Then we will integrate it with AjaxAnywhere.

To feel and compare the page behavior with and wothout AjaxAnywhere, click on this Online Demo 

<%@ page pageEncoding="UTF-8" import="java.util.*"%>
<%  // some unimportant code here
    String currentLanguage = request.getParameter("language");
    if (currentLanguage==null)
        currentLanguage="en";

    Locale[] availableLocales = Locale.getAvailableLocales();
    Map languagesDisplay = new TreeMap();
    Map countries = new TreeMap();

    for (int i = 0; i < availableLocales.length; i++) {
        Locale loc= availableLocales[i];
        languagesDisplay.put(loc.getLanguage(), loc.getDisplayLanguage(Locale.ENGLISH));
        if (loc.getDisplayCountry(Locale.ENGLISH).length()>0 
            && loc.getLanguage().equals(currentLanguage))
            countries.put(loc.getCountry(), loc.getDisplayCountry(Locale.ENGLISH));
    }
%>

Without AjaxAnywhere <br>
<%@ include file="/locales_counter.jsp"%>

<form method="POST" name=main>

    <select size="10" name="language" onchange="this.form.submit()">
        <%@ include file="/locales_options_lang.jsp"%>
    </select>


    <select size="10" name="country" >
        <%@ include file="/locales_options_countries.jsp.jsp"%>
    </select>
</form>


The first list contains all languages available in the JVM. The second list contains countries that use the selected language. As a new item of the first list is selected, the page gets reloaded refreshed, updating the second list with the countries that uses the selected language.

The following code shows how easily we can make this page use AJAX.


<%@ page pageEncoding="UTF-8" import="java.util.*"%>
<%@ page import="org.ajaxanywhere.AAUtils"%>
<%@ taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>

<%
    String currentLanguage = request.getParameter("language");
    if (currentLanguage==null)
        currentLanguage="en";

    Locale[] availableLocales = Locale.getAvailableLocales();
    Map languagesDisplay = new TreeMap();
    Map countries = new TreeMap();

    for (int i = 0; i < availableLocales.length; i++) {
        Locale loc= availableLocales[i];
        languagesDisplay.put(loc.getLanguage(), loc.getDisplayLanguage(Locale.ENGLISH));
        if (loc.getDisplayCountry(Locale.ENGLISH).length()>0 
            && loc.getLanguage().equals(currentLanguage))
            countries.put(loc.getCountry(), loc.getDisplayCountry(Locale.ENGLISH));
    }


// this code does not have to be placed inside a JSP page. It can (should)
// be executed inside your Controller, if you use an MVC famework. For Struts, for example,
// this code goes to an Action class.

    if (AAUtils.isAjaxRequest(request)){
        AAUtils.addZones(request, "countriesList");
    }

%>

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

With AjaxAnywhere <br>
<%@ include file="/locales_counter.jsp"%>

<form method="POST" name=main>

<!-- Here the form does not have action attribute. 
This means that the form is submitted to
the original URL, this JSP page in our case.

However, your application may submit to a different URL.

Also, you application may use GET, instead of POST, download AjaxAnywhere Demo Application for more examples.
-->


    <select size="10" name="language" onchange="ajaxAnywhere.submitAJAX();">
        <%@ include file="/locales_options_lang.jsp"%>
    </select>

<aa:zone name="countriesList">

    <select size="10" name="country" >
        <%@ include file="/locales_options_countries.jsp.jsp"%>
    </select>

</aa:zone>


</form>


Do not forget that AAFilter must be properly mapped in web.xml (see also : Installation ) 
    <filter>
        <filter-name>AjaxAnywhere</filter-name>
        <filter-class>org.ajaxanywhere.AAFilter</filter-class>
    </filter>

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


Now we will take a close look at each modification:
  • First of all we use aa:zone custom tag to mark a zone that needs to be refreshed.
  • Then we include JavaScript file and assign the form name to a property of AjaxAnywhere default instance. We also modify onchange attribute of the first list.
  • Finally, on the server side we use AAUtil class to indicate what zone is to be refreshed. As the zone name was already known before submitting the request, we could also have implemented this logic on the client-side instead: 
    ajaxAnywhere.getZonesToReload = function() {
	return "countriesList";
}
More examples are availble inside the AjawAnywhere DEMO Application, which is available for download. Detailed documentation will be shortly available. Stay tuned.