Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Create a selection list with the Map keys as option values and the Map values as the option content.

This hack creates a pop-up selection list on a web page from a Java Map. The list is made up of a select tag with one or more nested option tags. Each option can have a value attribute, which is what the web application sends to the server instead of the content of the option. For example, the application sends uk or fr in the following cases, not United Kingdom or France:

<select> <option value="uk">United Kingdom</option> <option value="fr">France</option> </select>

This hack uses DWR to generate the pop-up from a Java Map, using Map keys as the values of the option value attributes. The hack uses the same web page as that depicted in Figure 5-2, but it generates the select element in a slightly different manner. Here are the important parts of the web page's underlying HTML code, including the script tags that import various JavaScript libraries and the select tag itself:

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="/parkerriver/ajaxhacks/js/hacks5_3.js"></script> <script type="text/javascript" src="/parkerriver/dwr/interface/JsBikeBean.js"></script> <script type="text/javascript" src="/parkerriver/dwr/engine.js"></script> <script type="text/javascript" src="/books/4/254/1/html/2//parkerriver/dwr/util.js"></script> <title>Bike Information</title> </head> <!snipped... --> <p> Bikes: <select ></select> </p>

engine.js is a required JavaScript code library for web pages that use the DWR framework. JsBikeBean.js enables our code to make remote calls to BikeBean.java. Importing util.js is optional; I do it here because we're using one of its functions.

Code Ahead

Here is the code in hacks5_3.js for making a remote Java call and loading up the select list:

window.onload=function( ){ JsBikeBean.getBikeInfo(populate);}; function populate(map){ DWRUtil.removeAllOptions("bikes"); addOptionValues("bikes", map); } function addOptionValues(_id,_map){ var sel = document.getElementById(_id); var opt = null; if(sel != null){ for(var prop in _map) { opt=document.createElement("option"); opt.setAttribute("value",_map[prop]); opt.appendChild(document.createTextNode(prop)); sel.appendChild(opt); } } }

Ponder window.onload, which points to the function that the browser's JavaScript runtime calls when the web page is finished loading. This code makes the remote Java method call, passing the return value to a function named populate( ):

JsBikeBean.getBikeInfo(populate);

populate( ) in turn removes any existing options from the select element and then creates new option elements by calling addOptionValues( ). The latter function uses Document Object Model programming to create new option elements and add them to the existing select element. The _map variable refers to the JavaScript object to which the server component's return value was converted.

In the for/in loop, prop represents the names of each of the original Map keys, and _map[prop] returns the values of these elements. In the code, _map is a JavaScript object, as in:

{"Trek":"0006"}

Using the syntax _map["Trek"] returns that property value, as in 0006.

The options that this code creates look like <option value="0006">Trek</option>. As described earlier in this hack, when the user makes a selection from the pop-up list, the browser sends the value of that option's value attribute (here, 0006) to the server.

This hack represents a handy technique for converting hash table values running as Java objects to select options. "Display the Keys/Values from a Java HashMap on a Web Page" [Hack #46] shows the keys and values from a Java Map type as text on a web page.

Related

Категории