AJAX Matters

  • Home
  • Articles
  • About Us
Rss Feeds

Article Topics

All Articles
General AJAX
ASP.NET AJAX
Google Web Toolkit
AJAX Using Java
AJAX Using PHP
Dojo
 

articles >> general ajax >> AjaxTags Tutorial (Part 1)

AjaxTags Tutorial (Part 1)

By : Mamun Zaman
Jul 08, 2007
Printer friendly

Page 2 / 3

Also AjaxTags has some helper classes for generating this XML from servlets or java applications. Here is a sample code for generating XML responses using these helper classes.

AjaxXmlBuilder builder = new AjaxXmlBuilder();
for(String aString: firstNames)
{
if(aString.toUpperCase().startsWith(“TOM”))
{
builder.addItem(aString, aString);
}
}
return(builder.toString());

This will generate an output like following.

<?xml version="1.0" encoding="UTF-8"?>
<ajax-response>
<response>
<item>
<name>TOM CAT</name>
<value>TOM CAT</value>
</item>
…
…
</response>
</ajax-response>

In my previous article about using AJAX with JSP, I used plain JavaScript code to request a server side code for getting the server time. Here is a similar example, but here I will use the ajax:anchors tag instead of JavaScript. Here is an example,

<ajax:anchors target="output">
Server Time: <a href="date.jsp" class="contentLink">Click Here</a>
</ajax:anchors>

<div id="output"></div>

Anchors tag converts a normal <a> tag. It replaces href attribute with onClick event. So, if you click this link AjaxTags will request for date.jsp and the output will be placed in the <div> tag ‘output’. Here is the date.jsp

<b><%= new java.util.Date() %></b>

Now we will use ajax:updateField tag.

<form>
<fieldset>

<legend>Conversion</legend>

<label for="c">Celsius</label>
<input type="text" id="c" />

<input id="action" type="button" value="Convert"/>

<label for="f">Fahrenheit</label>
<input type="text" id="f" />

</fieldset>
</form>

<ajax:updateField
baseUrl="temperature_conversion.view"
source="c"
target="f"
action="action"
parameters="Celsius={c}" />

We want to convert from Celsius to Fahrenheit. We have a Servlet called temperature_conversion.view that takes a Celsius value and converts into Fahrenheit. We add two input elements, one for Celsius and on for Fahrenheit. You need to have id attributes for these input elements for referencing. Also need a button to initiate Ajax request. These elements need to be within a <form> tag. And the most important thing is ajax:updateField needs to be placed after this form tag.

Attribute baseUrl is common for almost all tags. It specifies the server side code that AjaxTags will request for. Attribute source specifies the source element. Similarly, attribute target specifies the element that will be updated with the server side response. To initiate Ajax request, we need a button to be clicked. Attribute action references this button. Our Servlet requires a parameter, Celsius, parameters attribute specifies this parameter. Here in the above example, we are sending the value of element with id=c as the value of parameter Celsius. Please remember the curly braces {}. In this case the return value will update a single textbox. If we need to return multiple values to update multiple textboxes then we need to add another attribute of ajax:updateField, which is parser. Here is the modified version.
Progress Bar:
We now want to display message after the server side calculation has completed. AjaxTags has following 3 attributes for pre, post and error processing.

  • preFunction: triggers before AjaxTags requests for server side code
  • PostFunction: after successful response from server
  • errorFunction: triggers if server response is something other than 200

Our previous example was –

<form>
<fieldset>

<legend>Conversion</legend>

<label for="c">Celsius</label>
<input type="text" id="c" />

<input id="action" type="button" value="Convert"/>

<label for="f">Fahrenheit</label>
<input type="text" id="f" />

</fieldset>
</form>

<ajax:updateField
baseUrl="temperature_conversion.view"
source="c"
target="f"
action="action"
parameters="Celsius={c}" />

Now we want to inform our users about conversion success. We need to add a JavaScript function for alerting users about successful conversion.

<head>
…
<script type="text/javascript">
function successful() {
alert("Temperature conversion successful!");
}
</script>
…
</head>

Here is the modified ajax:updateField tag.

…
<ajax:updateField
baseUrl="temperature_conversion.view"
source="c"
target="f"
action="action"
parameters="Celsius={c}"
postFunction="successful"/>
We also want to add an error function. Here is the JavaScript function.

<script type="text/javascript">
function warn() {
alert("Error occurred while processing!");
}
</script>

…

<form>
<fieldset>

<legend>Conversion</legend>

<label for="c">Celsius</label>
<input type="text" id="c" />

<input id="action" type="button" value="Convert"/>

<label for="f">Fahrenheit</label>
<input type="text" id="f" />

</fieldset>
</form>

<ajax:updateField
baseUrl="temperature_conversion.view"
source="c"
target="f"
action="action"
parameters="Celsius={c}"
postFunction="successful"
errorFunction="warn"/>

 

<form>
<fieldset>

<legend>Conversion</legend>

<label for="c">Celsius</label>
<input type="text" id="c" />

<input id="action" type="button" value="Convert"/>

<label for="f">Fahrenheit</label>
<input type="text" id="f" />

<label for="k">Kelvin</label>
<input type="text" id="k" />

</fieldset>
</form>

<ajax:updateField
baseUrl="temperature_conversion.view"
source="c"
target="f,k"
action="action"
parameters="Celsius={c}"
parser = “new ResponseXmlParser()”/>

Our Servlet should return a response similar below to update Fahrenheit and Kelvin field.

<?xml version="1.0" encoding="UTF-8"?>
<ajax-response>
<response>
<item>
<name>f</name>
<value>Fahrenheit value</value>
</item>
<item>
<name>k</name>
<value>Kelvin value</value>
</item>
</response>
</ajax-response>

You already know how to use AjaxTags helper classes to generate this XML response. The ResponseXmlParser parser will parse this XML and get the value for these fields. Default parser for this tag is ResponseHtmlParser.


<< Prev Page     Next Page>>    








General AJAX | ASP.NET AJAX | Google Web Toolkit | AJAX Using Java | AJAX Using PHP | Dojo


© 2000 - 2008 vDerivatives Limited All Rights Reserved.