JSP Libraries and AJAX

Let's start using AjaxTags tags.

Remember, in the first part of this two-part tutorial series, I used plain JavaScript code to request a server side code for getting server time. Here is a similar example, but I use the ajax:anchors tag instead of JavaScript. Here is an example:

<ajax:anchors target="res">
  Server Date Time: <a rel="nofollow" target="_blank" href = "date.jsp" class="contentLink">Click Here</a>
</ajax:anchors>

<div id="res">Server Date Time will replace this text.</div>

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

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

Here is a tabbed page using ajax:tab and ajax:tabPanel tags.

<ajax:tabPanel
    panelStyleId="tabPanel"
    contentStyleId="tabContent"
    currentStyleId="ajaxCurrentTab">
  <ajax:tab caption="Tab1"
    baseUrl="server.view?id=1"
    defaultTab="true"/>
  <ajax:tab caption="Tab2"
    baseUrl="srever.view"
    parameters="id=2"/>
  <ajax:tab caption="Tab3"
    baseUrl="server.view"
    parameters="id=3"/>
</ajax:tabPanel>

We can include parameters in baseUrl like HTTP GET (baseUrl= "server.view?id=1"), or we can use the parameters' attribute (parameters="id=3"). Here we created a tab panel of 3 tabs, and made tab1 default.

Using AjaxTags' ajax:updateField tag, you can update the value of different text fields as shown in the example below. 

We want to convert from centimeter to inch. We have a servlet called converter.view that takes a centimeter value and converts it into the equivalent in inches. We add two input elements, one for each of these. You need to have id attributes for these input elements for referencing. You also need a button to initiate the Ajax request. These elements need to be within a <form> tag. The important thing is the ajax:updateField needs to be placed after this form tag because it needs to refer elements using their ids.

The attribute source specifies the source element. The attribute target specifies the element that will be updated with the server side response. To initiate the Ajax request, we need a button to be clicked. The attribute action references this button. Our servlet requires a parameter, namely centimeter. Here in the above example, we are sending the value of the element with id=c as the value of the parameter Centimeter. Please remember the braces {}.

<form>
  <fieldset>

    <legend>Conversion</legend>

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

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

    <label for="i">Inch</label>
    <input type="text" id="i" />
  </fieldset>
</form>

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

AjaxTags has some other cool tags like autocomplete, callout, and portlet. We may discuss those tags at another time; meanwhile you can visit the AjaxTags project home page at http://ajaxtags.sourceforge.net/index.html.