Tapestry and AJAX: Autocompleter and InlineEditBox - Enabling JavaScript
(Page 3 of 4 )
Before running the application, don't forget to provide the required support for JavaScript, otherwise Autocompleter won't work:
1. Turn the <html> element of the Web page into a Shell component. This will ensure that the required JavaScript libraries are available for the page. In the current version of Tapestry we also need to disable debugging (I would say it should be disabled by default, but it isn't), otherwise Dojo will print ugly error messages straight across the page. Here is how everything should look:
<html jwcid="@Shell" title="Celebrity Collector: Celebrities List" debugEnabled="false">
2. Turn the <body> element into the Body component. This will show Tapestry where to place any JavaScript it might want to write for us:
<body jwcid="@Body">
3. Mark the existing <DOCTYPE> and <head> elements for removal as they will be added by the Shell component and we don't want them to be duplicated:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
jwcid="$remove$">
...
<head jwcid="$remove$">
...
</head>
Now, the moment of truth has arrived. Run the application and navigate to the page with the table of celebrities. You will see that the text box that we've used in the mock up became something different, something which looks like a drop-down list:
Try typing the character g into this fancy control (well, that's because we have two celebrities with surnames starting with "G") and you should see how Autocompleter works. It's AJAX in action!
Next: Meet InlineEditBox >>
More Apache Articles
More By Alexander Kolesnikov
