The Script.aculo.us JavaScript Library Part I: Ajax ...courses.coreservlets.com/Course-Materials/pdf/ajax/Scriptaculous-Ajax.pdf• Ajax-specific features – Autocompleting textfieldsAutocompleting
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
For live Ajax & GWT training, see training t htt // l t /courses at http://courses.coreservlets.com/.
Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial Available at public Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held on-site at
Developed and taught by well-known author and developer. At public venues or onsite at your location.
• Courses developed and taught by Marty Hall– Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF 1.x & 2.0, Ajax, GWT, custom mix of topics– Ajax courses can concentrate on one library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo) or survey several
• Courses developed and taught by coreservlets.com experts (edited by Marty)– Spring, Hibernate/JPA, EJB3, Ruby/Rails
• Textfields with dropdown list of matching choices• Covered in first half of this section
– In-place editorsIn-place editors• Clickable text that you can edit and send to server• Covered in second half of this section
• General features• General features– Visual effects (fade in, fade out, highlighting)
• Covered in next section– Drag and drop
• Covered in later section7
Downloading and Installation
• Download– http://script.aculo.us/downloads
• Unzip and grab .js files out of “src” folder– Usually put in subdirectory of scripts since there are many filesUsually put in subdirectory of scripts since there are many files
• This tutorial corresponds to Scriptaculous 1.8.1
If you know you will only use certain parts of scriptaculous library you can save
12
If you know you will only use certain parts of scriptaculous library, you can save download time by loading only some of it. To load all of it, just omit the "load=" part. I.e., <script src=".../scriptaculous.js"...></script>. Autocomplete is in controls, but relies on effects internally.
Autocompleter.Local Example: Main HTMLMain HTML
<body>...<fieldset><legend>Autocomplete.Local</legend><form action="#"><label for="langField1">Programming language:</label><input type="text" id="langField1"/><input type="button" value="Search on Language"
private List<String> findLanguages(String languagePrefix) {languagePrefix = languagePrefix.toUpperCase();List<String> languages = new ArrayList<String>();List<String> languages = new ArrayList<String>();for(String language: languageArray) {if(language.toUpperCase().startsWith(languagePrefix)) {languages.add(language);
}}return(languages);
}}}
22
Ajax.Autocompleter Example: JSP
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c" %>prefix= c %>
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Autocompleter Options
• Idea– Autocompleter.Local and Ajax.Autocompleter accept an
options array as the fourth argument• new Ajax Autocompleter(fieldID divID urlnew Ajax.Autocompleter(fieldID, divID, url,
{ opt1: ..., opt2: ..., ... });
• Legal properties for both classes– autoSelect (default: false)
• Should value automatically be inserted into textfield if there is only one matching choice?y g
– frequency (default: 0.4)• Interval in seconds between attempts to autocomplete
i Ch (d f lt 1)– minChars (default: 1)• The number of characters before autocompletion kicks in
27
Autocompleter Options (Continued)
• Options for Autocompleter.Localh i (d f l 10)– choices (default 10)• Maximum number of entries to display
– partialSearch (default true)• Should match be made at beginning of any word?
False means to match beginning of first word only.– partialChars (default 2)
• Number of characters before partial search kicks in. When number of chars is greater or equal to minChars but less than partialChars, you get a non-partial search (first word).
f llSearch (defa lt false)– fullSearch (default false)• Should match be anywhere? False means to match only at
the beginning of each candidate.selector (default: function that searches array)– selector (default: function that searches array)
• Function that does real work of doing match and building ul list.
28
Autocompleter Options (Continued)
• Options for Ajax.Autocompleteri di (d f l )– indicator (default: none)
• Id of element that should be shown while waiting for server result, then hidden again
N (d f lt f t tfi ld)– paramName (default: name of textfield)• parameter name sent to server (parameter value is
textfield value, of course)t (d f lt t )– parameters (default: empty)
• Extra string sent to server (fixed parameters)– tokens (default: empty)
• Array of delimeters: each entry outside delimeters is autocompleted separately
– afterUpdateElement (default: none)• Function to run when user makes choice. Lets you
"languages-slow", { indicator: "indicatorRegion",{ g ,paramName: "langPrefix"});
};
30
Autocompleter Options Example: HTMLHTML
<fieldset><legend>Ajax Autocomplete with Indicator</legend><legend>Ajax.Autocomplete with Indicator</legend><form action="#"><span id="indicatorRegion" style="display:none;"><img src="images/busy-indicator.gif"/>g g y gLoading...
</span><br/><label for="langField3">Programming language:</label><input type="text" id="langField3" name="bad-name"/><input type="button" value="Search on Language"
onclick="googleSearch('langField3')"/><br/><di id "l M 3" l " t l t "></di ><div id="langMenu3" class="autocomplete"></div>
</form></fieldset>
31
Autocompleter Options Example: JavaJavapublic class SlowLanguageCompleter
• Idea– You can use ajaxOptions to specify an options object that
gets passed to the underlying Ajax.Request object• new Ajax InPlaceEditor("id" "url" { ajaxOptions: { blah });new Ajax.InPlaceEditor( id , url , { ajaxOptions: { blah });• For {blah} above, you can use all of the same options as
discussed in the earlier section on the Prototype Ajax librarieslibraries
• Most important usage: extra parameters– You are editing a first name, but what customer id does
that first name go with?• var params = { param1: $("div-id").innerHTML,
param2: $F("textfield-id")};p ( )}• var options = { parameters: params }• new Ajax.InPlaceEditor("id", "url", { ajaxOptions: options });
• Behavior– They look up the session, get a Traveler object from the
session, then store first name, last name, etc. in that object– They also have a delay to simulate use on a loadedThey also have a delay to simulate use on a loaded
network• This lets you see "Saving..." message while waiting for
server updateserver update
51
Advanced Example: Servlets for Updating (Parent)Servlets for Updating (Parent)
public abstract class UpdateTraveler extends HttpServlet {public void doPost(HttpServletRequest request,public void doPost(HttpServletRequest request,