The ajax theme is deprecated!

The ajax theme extends the xhtml theme with AJAX features. The theme uses the popular DOJO AJAX/JavaScript toolkit. AJAX features include:

  • AJAX Client Side Validation
  • Remote form submission support (works with the submit tag as well)
  • An advanced div template that provides dynamic reloading of partial HTML
  • An advanced a template that provides the ability to load and evaluate JavaScript remotely
  • An AJAX-only tabbedPanel implementation
  • A rich pub-sub event model
  • Interactive autocomplete tag

(tick) See also: Ajax tags

Browser Compatibility

AJAX (as a technology) uses a browser-side scripting component that varies between browers (and sometimes versions). To hide those differences from the developer, we utilize the dojo toolkit (http://www.dojotoolkit.org). Several browsers are supported by dojo, and any UI's created with the ajax theme should act the same way for supported browsers. The supported browsers are:

  • IE 5.5+
  • FF 1.0+
  • Latest Safari (on up-to-date OS versions)
  • Latest Opera
  • Latest Konqueror

Extending the AJAX Theme

The wrapping technique utilized by the ajax theme is much like xhtml theme, but the controlheader.ftl is a wee bit different.

<#if parameters.label?if_exists != "">
	<#include "/${parameters.templateDir}/xhtml/controlheader.ftl" />
</#if>
<#if parameters.form?exists && parameters.form.validate?default(false) == true>
	<#-- can't mutate the data model in freemarker -->
    <#if parameters.onblur?exists>
        ${tag.addParameter('onblur', "validate(this);${parameters.onblur}")}
    <#else>
        ${tag.addParameter('onblur', "validate(this);")}
    </#if>
</#if>

The header provides for AJAX Client Side Validation by checking if the validate attribute is set to true. If it is, a validation request is made on each onblur event for a HTML Struts Tags. Some people don't like the onblur behavior; they would rather a more advanced timer (say, 200ms) be kicked off after every keystroke. You can override this template and provide that type of behavior if you would like.

Special Interest

Three ajax_xhtml templates of special interest are head, div, and a.

Especially with the ajax theme, it is important to use the head tag. (See the ajax head template for more information.) Without it, AJAX support may not be set up properly.

(tick) In addition to these templates, be familiar with the ajax event system provided by the framework and Dojo.

1 Comment

  1. Marcos Hernandez

    If you want to use the keystroke timeOut validation, but don't want to mess with the Ajax template, you can add this property to the <s:input>  tag:

    onkeyup="window.setTimeout('validate(document.getElementById(\\\'formName_fieldName\\\'))', timeoutInMillisecons);"

    Substitute formName and fieldName with your own values, to re-create the actual element ID generated  by Struts, remember to separate them by an underscore. Finally set the desired timeout as the last parameter.

    Be aware that the validate's parameter goes through various interpretations before being evaluated, therefore the need to scape the apostrophe (\') , and the scape symbol before it (\ \ )

    This is how I used it to check the login field of the loginForm a second before the last key was released:

    onkeyup="window.setTimeout('validate(document.getElementById(\\\'loginForm_login\\\'))',1000);"

    Tested with IE6, FF2, Safari & Opera