One can need to update a field dynamically as a value is added in another table. Here's a little tutorial to do it with Javascript.
Let's look at the demo "links" table provided by Woda. There is one field
named "category" which is populated in the database definition file.
Now imagine it is a relational OPTION field related to a table called
"categories": if you need a new category you create it in the "categories"
table. And then you reload the Add form in the link table for the values to
be updated.
With Javascript, the field values in the link table can be updated as you Add
the value in the related table.
For this sample code, let's imagine that the category field is a dropdown list
with one choice only. And that the name of the field is the same in the two
tables (this is no required)
1. The link table:
in the "link/Add" form you set a href link ("NEW CATEGORY") which open the
"categories" table in a new window:
<code>
--------------
<A HREF="/cgi-bin/categories/Add" TARGET="categories"
onClick=\'window.open("","typestructures","scrollbars=yes,resizable=yes,menubar=yes,width=650,height=500");
\'>NEW CATEGORY</A>
-------------
</code>
2. The categories table:
I always add first an empty category, in case I don't want to select a
category in my "link" table. I will use this empty value to write my new
value in the dropdown.
I need to update the "link/Add" form after the new category value is
recorded in the "categories" table. For this, I put the javascript in
$WBB{Changed,Add}.
I use the Load event to call the javascript code in the
"categories/Changed" page. The onLoad event handler can be set in a IMAGE tag
(for images, the onLoad event handler indicates the script to execute when an
image is displayed, not when it is loaded). This IMAGE tag is also put in
$WBB{Changed,Add}.
The "link/Add" page can be accessed from javascript with the window.opener
property. The whole form can be referenced with the form number (first,
second, ... form in the page), the form NAME or the form ID. I use the form
NAME.
<code>
----------------------------------------------------------
$WBB{'head;Changed'} = <<'END';
# the new value is in $CGI{name of the field}
"<script language=\"javascript\">
<!--
function majForm(){
// to modify a listbox
// new Option object
// (like option tag in the dropdown)
var new_item=new Option(\"$CGI{category}\",\"$CGI{category}\");
// we rewrite the zero value
// (because the empty value is
// displayed first in the dropdown)
// in the page calling the window
// (the link/Add page)
// "main" is the name of the form
// "category" is the name of the field
window.opener.document.main.category.options[0] = new_item;
// force the display of the new value
// in the Add/link dropdown
// (required for Firefox)
window.opener.document.main.typeStructure.options[0].selected=true;
}
//--></script>
# we display an image from woda icons
<IMG SRC=\"/woda/icons/default/book1.gif\" onLoad=majForm()>
"
END
------------------------------------------------
</code>
If you need to modify a text field the code is rather simple:
window.opener.document.main.namofthefield.value = \"$CGI{category}\";
