|
|
How to make sortable lists
|
05/09/2006 By Symfony
|
This tutorial compares the Classic and AJAX sortable lists, in terms of programming complexity, HCI concerns, and user feedback. Good tutorial for anyone who is willing to add AJAX sortable lists to a site without really knowing why or how.
Comparison
The two methods are both effective to sort a list, but there are limitations and drawbacks.
For large arrays of items, you will probably need a paginated list. The classic method works fine with a page-by-page list, but the AJAX one needs adaptations, and makes it impossible to rearrange elements outside of their own page. That's why you should probably provide a 'move item to position' feature in addition to the AJAX ordering interface.
The AJAX action is not as well protected against wrong requests as the classic one. In order to avoid any risk of database incoherence, you should add a validateSort() method to the itemActions class. This method would check that all the items id, and only them, are present once and only once in the received array.
The AJAX interface is definitely more user friendly, especially for long ordering tasks, since there is no obligation of a server refresh between two operations. But the ability to drag elements is new in web interfaces, and users not used to it might find it surprising. Moreover, if you choose the AJAX interface, you will have to think about the size of the draggable elements (they need to be large enough to be grabbed), their aspect, their freedom of movement... A lot of Human-Computer Interaction issues that wouldn't need solving with the classic method.
AJAX interactions are always a problem if your target population may turn JavaScripts off in their browser. This means that in addition to the design of a JavaScript interface, you should then provide the classic interface as an alternative so that your functionality degraces gracefully.
All in all, the AJAX version really feels and looks better, but it is at least twice as long to develop.
Check ou
Page 1 | 2
|
Rate this Ajax Tutorials
Rating: 6.7 out of 50 votes cast
| |
|
|
|
|
|
|
|
|
|
|
|
|
Special offer for AjaxImpact.com Visitors!!
Subscribe to PC Magazine for Free!
