To iterate over a <ul> list of items I wrote up the following javascript code. It requires both the prototype & scriptaculous javascript libraries and takes advantage of scriptaculous’s combination effects: Appear, Fade, Puff, BlindDown, BlindUp, SwitchOff, SlideDown, SlideUp, DropOut, Squish, Fold, Grow, and Shrink.

It’s envoked as follows where ‘list-ID’ is the ID attribute of the list, ‘Effect-Hide’ is the scriptaculous disappear effect (such as Fade), ‘Effect-Show’ is the appear effect (such as Appear), and Time-Interval is the length of time to show the <li> item before moving on to the next one.

1. walkList(list-ID, Effect-Hide, Effect-Show, Time-Interval);

So, here is the walkList Function. It adds an onload event, using addEvent which I borrowed from Scott Andrew, to first hide all the list items using hideAll(list-ID) then initiates the list iteration with startWalking

1. function walkList(listID,eff1,eff2,intval) {
2. addEvent(window, ‘load’, function() {
3. hideAll(listID);
4. startWalking(listID, eff1, eff2, intval);
5. }, false);
6. }

hideAll gets the list items, loops through, setting each to ‘ dispay=”none” ‘ to hide them all

1. function hideAll(listID) {
2. var ul =$(listID).getElementsByTagName(”LI”);
3. for(var i=0;i
   
4. ul[i].style.display=’none’;
5. }
6. }

startWalking applies the specified hide effect to one item and a show effect to the next one. Then uses setTimeout to schedule the next transition.

1. var showNum = 0;
2. var hideNum = 0;
3. function startWalking(listID, eff1, eff2, intval) {
4. var ul =$(listID).getElementsByTagName(”LI”);
5. eval(’Effect.’+eff1+’(ul[hideNum].id,{duration:.3});’);
6. eval(”window.setTimeout(\’Effect.”+eff2+”(\”"+ul[showNum].id+”\”)\’,1000);”);
7. hideNum = showNum;
8. if(showNum == (ul.length-1)) {
9. showNum=0;
10. }
11. else showNum++;
12. setTimeout(’startWalking(\'’+listID+’\',\'’+eff1+’\',\'’+eff2+’\',’+intval+’)',intval);
13. }

Here is the demo

To fill in a forms’ fields without reloading the page I used prototype’s handy Ajax.Updater class, called from an onclick event with the database row key as a parameter, to request the data.

1. function loadUpdate(id) {
2. new Ajax.Updater('’,'item.php?action=get&id=’+id, {asynchronous:true, onSuccess:populateForm});
3. }

Used a PHP script in the item.php file to return the requested data in XML formatted as follows. Where id, fieldname, & anotherfieldname all correlate to the forms element id’s and 1, field value, & another field value are the data we’ll populate them with.

1. <xmlresponse><results>
2. <row>
3. <id>1</id>
4. <fieldname>field value</fieldname>
5. <anotherfieldname>another field value</anotherfieldname>
6. </row>
7. </results></xmlresponse>

Then used the populateForm function, referenced in the onSuccess parameter of the above mentioned loadUpdate(id) function, to parse the XML and assign each node to the correct form element

1. var FORMNAME = “formname”;
2. var populateForm = function LoadEditLink_Callback(str) {
3. var xmlResponse = str.responseXML;
4. var results = xmlResponse.getElementsByTagName(’row’)[0];
5. for(var i=0;i<results.childNodes.length;i++) {
6. var el = $(results.childNodes[i].nodeName);
7. switch(el.type) {
8. case ‘text’:
9. el.value = results.childNodes[i].firstChild.data;
10. break;
11. case ’select-one’:
12. for(var j=0; j<el.length;j++) {
13. if (el.options[j].value == results.childNodes[i].firstChild.data) {
14. el.selectedIndex = j;
15. }
16. }
17. break;
18. case ’select-multiple’:
19. var values = results.childNodes[i].firstChild.data.split(”,”);
20. for(var j=0; j<el.length;j++) {
21. el.options[j].selected = false;
22. for(var k=0;k<values.length;k++){
23. if (el.options[j].value == values[k]) {
24. el.options[j].selected = true;
25. }
26. }
27. }
28. break;
29. case ‘checkbox’:
30. var values = results.childNodes[i].firstChild.data.split(”,”);
31. var checkbox = Form.getInputs(FORMNAME, ‘checkbox’, results.childNodes[i].nodeName);
32. for(var j=0;j<checkbox.length;j++) {
33. checkbox[j].checked = false;
34. for(var k=0;k<values.length;k++){
35. if(checkbox[j].value == values[k]) {
36. checkbox[j].checked = true;
37. }
38. }
39. }
40. break;
41. case ‘radio’:
42. var radio = Form.getInputs(FORMNAME, ‘radio’, results.childNodes[i].nodeName);
43. for(var j=0;j<radio.length;j++) {
44. if(radio[j].value == results.childNodes[i].firstChild.data) {
45. radio[j].checked = true;
46. }
47. }
48. break;
49. case ‘textarea’:
50. el.value = results.childNodes[i].firstChild.data;
51. break;
52. case ‘hidden’:
53. el.value = results.childNodes[i].firstChild.data;
54. break;
55. }
56. }
57. }

So, here is a demo. I’ve tested it in ie7 and Firefox 1.5.0.7, not sure how it works in other browsers.

You can download the full source here