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"; }
© 2005-2007 AjaxAnywhere Project
|
|||||||
PREV CLASS NEXT CLASS | FRAMES NO FRAMES | ||||||
SUMMARY: FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD |
Class AjaxAnywhere
Object | +--AjaxAnywhere
Defined in aa.js
Field Summary | |
Object |
delayBeforeContentUpdate |
Object |
delayInMillis |
Object |
formName |
Object |
id |
Object |
notSupported |
Object |
req |
Object |
substitutedSubmitButtons Stores substitutes SubmitButton names in to redo sustitution if a button was eventually inside a refresh zone. |
Object |
substitutedSubmitButtonsInfo |
<static> Object |
defaultInstanceName |
Constructor Summary |
AjaxAnywhere () |
Method Summary | |
void |
bindById() Binds this instance to window object using "AjaxAnywhere."+this.id as a key. |
void |
callback() A callback. |
void |
dropPreviousRequest() Used internally by AjaxAnywhere. |
Object |
findForm() Returns a Form object that corresponds to formName property of this AjaxAnywhere class instance. |
Object |
getAJAX(url, zonesToRefresh) sends a GET request to the server. |
Object |
getDelayTime() Returns the delay period in milliseconds. |
Object |
getGlobalScriptsDeclarationsList(script) If the HTML received in responce to AJAX request contains JavaScript that defines new functions/variables, they must be propagated to the proper context. |
Object |
getZonesToReaload(url, submitButton) depreceted : wrond spelling : Reaload will be removed in later versions |
Object |
getZonesToReload(url, submitButton) This function should be overridden by AjaxAnywhere user to implement client-side determination of zones to reload. |
void |
handleException(type, details) If an exception is throws on the server-side during AJAX request, it will be processed by this function. |
void |
handleHttpErrorCode(code) If an HTTP Error code returned during AJAX request, it will be processed by this function. |
void |
handlePrevousRequestAborted() Override it if you need. |
void |
hideLoadingMessage() Default sample loading message hide function. |
Object |
isDelayBeforeLoad() Returns the current delay behavior. |
Object |
isFormSubmitByAjax() Override this function if you use AjaxAnywhere.substituteFormSubmitFunction() to dynamically inform AjaxAnywhere of the method you want to use for the form submission. |
void |
onAfterResponseProcessing() Override this method to implement a custom action |
void |
onBeforeResponseProcessing() Override this method to implement a custom action |
Object |
onGetAjaxNotSupported(url) Provides a default implementation from graceful degradation for getAJAX() calls location.href=url if XMLHttpRequest is unavailable, reloading the entire page . |
void |
onRequestSent() Override this method to implement a custom action |
Object |
onSubmitAjaxNotSupported(additionalPostData, submitButton) Provides a default implementation from graceful degradation for submitAJAX() calls form.submit() if XMLHttpRequest is unavailable, reloading the entire page |
Object |
preparePostData(submitButton) Internally used to prepare Post data. |
void |
setDelayBeforeLoad(isDelay) Some browsers (notably IE) do not load images from thier cache when content is updated using innerHTML. |
void |
setDelayTime(delayMillis) Sets the delay period in milliseconds. |
void |
showLoadingMessage() Default sample loading message show function. |
Object |
submitAJAX(additionalPostData, submitButton) This function is used to submit all form fields by AJAX request to the server. |
void |
substituteFormSubmitFunction() This function is used to facilitatte AjaxAnywhere integration with existing projects/frameworks. |
void |
substituteSubmitButtonsBehavior(keepExistingOnClickHandler, elements) Substitutes the default behavior of <input type=submit|image> to submit the form via AjaxAnywhere. |
<static> Object |
findInstance(id) Finds an instance by id. |
Field Detail |
delayBeforeContentUpdate
Object delayBeforeContentUpdate
delayInMillis
Object delayInMillis
formName
Object formName
id
Object id
notSupported
Object notSupported
req
Object req
substitutedSubmitButtons
Object substitutedSubmitButtons
-
Stores substitutes SubmitButton names in to redo sustitution if a button was eventually inside a refresh zone.
substitutedSubmitButtonsInfo
Object substitutedSubmitButtonsInfo
defaultInstanceName
<static> Object defaultInstanceName
Constructor Detail |
AjaxAnywhere
AjaxAnywhere()
Method Detail |
bindById
void bindById()
-
Binds this instance to window object using "AjaxAnywhere."+this.id as a key.
callback
void callback()
-
A callback. internally used
dropPreviousRequest
void dropPreviousRequest()
-
Used internally by AjaxAnywhere. Aborts previous request if not completed.
findForm
Object findForm()
-
Returns a Form object that corresponds to formName property of this AjaxAnywhere class instance.
getAJAX
Object getAJAX(url, zonesToRefresh)
-
sends a GET request to the server.
getDelayTime
Object getDelayTime()
-
Returns the delay period in milliseconds.
getGlobalScriptsDeclarationsList
Object getGlobalScriptsDeclarationsList(script)
-
If the HTML received in responce to AJAX request contains JavaScript that defines new functions/variables, they must be propagated to the proper context. Override this method to return the Array of function/variable names.
getZonesToReaload
Object getZonesToReaload(url, submitButton)
-
depreceted : wrond spelling : Reaload will be removed in later versions
getZonesToReload
Object getZonesToReload(url, submitButton)
-
This function should be overridden by AjaxAnywhere user to implement client-side determination of zones to reload. If the form is submited with <input type=submit|image>, submitButton is a reference to the DHTML object. Otherwise - undefined.
handleException
void handleException(type, details)
-
If an exception is throws on the server-side during AJAX request, it will be processed by this function. The default implementation is alert(stackTrace); Override it if you need.
handleHttpErrorCode
void handleHttpErrorCode(code)
-
If an HTTP Error code returned during AJAX request, it will be processed by this function. The default implementation is alert(code); Override it if you need.
handlePrevousRequestAborted
void handlePrevousRequestAborted()
-
Override it if you need.
hideLoadingMessage
void hideLoadingMessage()
-
Default sample loading message hide function. Overrride it if you like.
isDelayBeforeLoad
Object isDelayBeforeLoad()
-
Returns the current delay behavior.
isFormSubmitByAjax
Object isFormSubmitByAjax()
-
Override this function if you use AjaxAnywhere.substituteFormSubmitFunction() to dynamically inform AjaxAnywhere of the method you want to use for the form submission.
onAfterResponseProcessing
void onAfterResponseProcessing()
-
Override this method to implement a custom action
onBeforeResponseProcessing
void onBeforeResponseProcessing()
-
Override this method to implement a custom action
onGetAjaxNotSupported
Object onGetAjaxNotSupported(url)
-
Provides a default implementation from graceful degradation for getAJAX() calls location.href=url if XMLHttpRequest is unavailable, reloading the entire page .
onRequestSent
void onRequestSent()
-
Override this method to implement a custom action
onSubmitAjaxNotSupported
Object onSubmitAjaxNotSupported(additionalPostData, submitButton)
-
Provides a default implementation from graceful degradation for submitAJAX() calls form.submit() if XMLHttpRequest is unavailable, reloading the entire page
preparePostData
Object preparePostData(submitButton)
-
Internally used to prepare Post data. If the form is submited with <input type=submit|image>, submitButton is a reference to the DHTML object. Otherwise - undefined.
setDelayBeforeLoad
void setDelayBeforeLoad(isDelay)
-
Some browsers (notably IE) do not load images from thier cache when content is updated using innerHTML. As a result, each image is re-requested from the server even though the image exists in the cache. To work around this issue, AjaxAnywhere preloads images present in the new content and intrduces a brief dely (default of 100 milleseconds) before calling innerHTML. See http://support.microsoft.com/default.aspx?scid=kb;en-us;319546 for further details. This function can be used to change this behaviour.
Parameters:boolean
-
- ) isDelay
setDelayTime
void setDelayTime(delayMillis)
-
Sets the delay period in milliseconds. The default delay is 100 milliseconds.
Parameters:int
-
- ) delayMillis
showLoadingMessage
void showLoadingMessage()
-
Default sample loading message show function. Overrride it if you like.
submitAJAX
Object submitAJAX(additionalPostData, submitButton)
-
This function is used to submit all form fields by AJAX request to the server. If the form is submited with <input type=submit|image>, submitButton should be a reference to the DHTML object. Otherwise - undefined.
substituteFormSubmitFunction
void substituteFormSubmitFunction()
-
This function is used to facilitatte AjaxAnywhere integration with existing projects/frameworks. It substitutes default Form.sumbit(). The new implementation calls AjaxAnywhere.isFormSubmitByAjax() function to find out if the form should be submitted in traditional way or by AjaxAnywhere.
substituteSubmitButtonsBehavior
void substituteSubmitButtonsBehavior(keepExistingOnClickHandler, elements)
-
Substitutes the default behavior of <input type=submit|image> to submit the form via AjaxAnywhere.
Parameters:indicates
-
- if existing onClick handlers should be preserved. If keepExistingOnClickHandler==true, Existing handler will be called first if it returns false, or if event.returnValue==false, AjaxAnywhere will not continue form submission. If keepExistingOnClickHandler==false or undefines, existing onClick event handlers will be replaced.
list
-
- of submitButtons and submitImages names. If the parameter is omitted or undefined, all elements will be processed
findInstance
<static> Object findInstance(id)
-
Finds an instance by id.
|
|||||||
PREV CLASS NEXT CLASS | FRAMES NO FRAMES | ||||||
SUMMARY: FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD |
Documentation generated by
JSDoc on Thu Dec 7 18:03:06 2006