[Zope] Midgard

Howard Clinton Shaw III shawh@sths.org
Mon, 17 May 1999 06:40:29 -0500


On Mon, 17 May 1999, Service Informatique CHSR wrote:
> >Cascading menus are pretty simple using a little Javascript... And it
> should be
> >possible to have the interface provide a traditional long-john add list in
> the  
> >absence of Javascript. Basically you have the Javascript change the
> contents of
> >menu B based on the selection in menu A. I have a sample in Zope based on
> data
> >pulled from an SQL query, ***if you're interested***
> I am
> 
> Thanks in advance

First, note that on looking back at it, I see that I used listboxes, but the
same techniques should apply as with pull-down menus, you just change the way
you declare the html. All the javascript should be identical, if I'm not
mistaken. Oh, BTW, this is the first major piece of Javascript I've written.

To see it in action, go to http://www.sths.org/genus/uber/login and login as
'test' with password 'testing'. Then go to
http://www.sths.org/genus/uber/classifications.htm. Making a selection here in
the center listbox changes the options available in the rightmost listbox.. To
see the structure which determines the options in the two listboxes, go to
http://www.sths.org/genus/uber/renderall.

Also, note that this is a work in progress, and that this javascript is
partially dynamically generated by DTML, so it might be best to go to the
address above and look at the page source to get a cleaner picture of how the
code works.

**** the code ****
<!--#var standard_html_header-->
<!--#var second_header-->
<SCRIPT LANGUAGE="JavaScript">
<!--

<!--#in categoriesdb-->
 <!--#if sequence-start-->
  var cats = new Array(1);
 <!--#/if-->
  cats[<!--#var idx-->]=<!--#var sublevel-->;
<!--#/in-->

<!--#in categoriesdb-->
 <!--#if sequence-start-->
  var classif = new Array(<!--#var count-name-->);
 <!--#/if-->
  temp=<!--#var sequence-index-->;
 <!--#in "classifylvldb(level=idx)"-->
  <!--#if sequence-start-->
   classif[temp]= new Array(<!--#var count-name-->);
  <!--#/if-->
  classif[temp][<!--#var sequence-index-->] = new Array("<!--#var name--> - <!--#var ccname-->",<!--#var idx-->);
 <!--#/in-->
<!--#/in-->

function showParents(categoryIndex) {
  temp = categoryIndex - 1;
  //empty it
  for (i=0; i<document.addform.prnts.length;i++) {
    document.addform.prnts.options[i].text=" ";
  }
  if (temp<0) return;
  if (!classif[temp]) return;
  if (!document.addform.prnts.options[0]) {
    document.addform.prnts.options[0]=new Option('None');
    document.addform.prnts.options[0].value=-1;
  }
  document.addform.prnts.options[0].text = 'None';
  document.addform.prnts.options[0].value = -1;
  document.addform.prnts.options[0].selected = 1;
  for (i=1;i<=classif[temp].length;i++) {
    if (!document.addform.prnts.options[i]) {
      document.addform.prnts.options[i]=new Option(classif[temp][i-1]);
    }
    document.addform.prnts.options[i].text = classif[temp][i-1][0];
    document.addform.prnts.options[i].value = classif[temp][i-1][1];
    document.addform.prnts.options[i].selected = 0;
  }
}
//-->
</SCRIPT>
<br>
<center>
<form name="addform" ACTION="classifications_response" METHOD="POST">
<!--#var tbl_start-->
<tr><td colspan=3><center><font size=+2>Add Classifications</font></center></td></tr>
<tr>
<td>
Classification Name:<br>
<input type="text" name="name" value="">
</td>
<td>
Classification Level:<br>
<!--#in categoriesdb-->
 <!--#if sequence-start--> 
  <select name="categ" size="15" onChange="if (selectedIndex>-1) showParents(cats[this.options[selectedIndex].value]-1);">
 <!--#/if-->
  <option value="<!--#var idx-->"><!--#var name-->
 <!--#if sequence-end-->
  </select>
 <!--#/if-->
<!--#/in-->
</td>
<td>
Classification Parent:<br>
<select name="prnts" width=10 size=15>
 <option value=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</select>
</td>
</tr>
<tr>
<td colspan=3>
<center><input type="submit"></center>
</td>
</tr>
</table>
</form>
</center>
<!--#var standard_html_footer-->

Enjoy!

> 
> Regards,
> Jephte CLAIN
> Service Informatique
--
Howard Clinton Shaw III - Grum
St. Thomas High School
#include <disclaimer.h>