Magazine
 
Quick Review:Ajax
 

Automate data entry with Web services and Ajax

The usability of this address form may be called into question. In the U.S., it’s normal for the address input fields to be listed in the order of:

  • Street
  • City
  • State
  • ZIP
But the form here lists the fields in this order:
  • Street
  • ZIP
  • City
  • State

Let’s assume that this usability issue can be overcome by user training, instructional text, or common sense. It might also make sense to darken the city and state fields or to prevent entry in them all together. Work with your usability experts to craft an acceptable solution.

Listing 1 shows the input form named _form.rhtml and the input text fields. Notice that the input text field zip5 has been moved above city and state. The last line, debug(params), is optional.

During the development and test phases, I usually include this debug data in my RoR views.

Listing 1. Partial with order of input fields changed (_form.rhtml)

<%= error_messages_for ‘address’ %>
<p><label for=”address_street”>Street</label><br/>
<%= text_field ‘address’, ‘street’ %></p>
<p><label for=”address_zip5">Zip5</label><br/>
<%= text_field ‘address’, ‘zip5’, :size => “9”, :maxlength => “5” %></p>
<p><label for=”address_city”>City</label><br/>
<%= text_field ‘address’, ‘city’ %></p>
<p><label for=”address_state”>State</label><br/>
<%= text_field ‘address’, ‘state’ %></p>
<%= debug(params) %>

Step 2: Add a Rails partial
The second step in the solution is to break up the _form.rhtml input form by separating the city and state input fields into a new partial. The RoR naming convention is to prefix an underscore to partials. Therefore, the name of the new partial is _cityState.rhtml. The new file resides in the same directory as _form.rhtml. Listing 2 shows the code for the new file, _cityState.rhtml.

Listing 2. New RoR partial (_cityState.rhtml)

<p><label for=”address_city”>City</label><br/>
<%= text_field ‘address’, ‘city’ %></p>
<p><label for=”address_state”>State</label><br/>

June 2008 | Java Jazz Up | 16
 
previous
index
next
 
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,

30
, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51,   Download PDF