Here's an AJAX solution:
create a custom action named get_types as follows:
Add a file named get_types.php into your actions directory with the following contents:
class actions_get_types {
function handle(&$params){
if ( isset($_REQUEST['type_group']) ){
$sql = "select type_id, type_name from types where type_group='".addslashes($_REQUEST['type_group'])."'";
} else {
$sql = "select type_id, type_name from types";
}
$res = mysql_query($sql, df_db());
if ( !$res ) trigger_error(mysql_error(df_db()), E_USER_ERROR);
header('Content-type: text/javascript');
echo '[';
$values = array();
while ( $row = mysql_fetch_assoc($res) ){
$values[] = "{id:'".$row['type_id']."', name: '".addslashes($row['type_name'])."'}";
}
echo implode(',',$values);
echo ']';
exit;
}
}
?>
What this does is returns the values for a given type group in JSON format (which javascript can read very easily).
Then in javascript you could do something like:
var types_http = getHTTPObject();
/**
* updateTypesList
* This function is to be assigned in the onchange handler for the group types select list.
*/
function updateTypesList(type_groups_select){
// type_groups_select is a reference to the type_groups select list
var selectedGroup = type_groups_select.options[group_list.selectedIndex].value;
var url = DATAFACE_SITE_HREF +'?-action=get_types&type_group='.escape(selectedGroup);
types_http.open("GET", url);
types_http.onreadystatechange = handleUpdateTypesList;
// Assign the handleUpdateTypesList function as a handler to be called when the HTTP object receives a response from the server
types_http.group_list = type_groups_select;
// Save a reference to the group types select list in the http object so that it can be accessed from the handleUpdateTypesList function
types_http.send(null);
}
/**
* handleUpdateTypesList
* This function is called when a response is received from the HTTP object after we request the types for a particular group.
*/
function handleUpdateTypesList(){
if ( types_http.readystate == 4 ){
// We have successfully obtained the response from the server
var options = eval('(' + types_http.responseText +')');
// we now have the options that we will use to fill the 2nd select list as an array
// now let's get out select list and refill it
var types_list = types_http.group_list.form.elements['type_id'];
// We obtain a reference to the type_id select list (let's assume that the field is named type_id.. if not, then change this).
// Clear the existing options in the types list.
for ( var i=0; i types_list.options[i] = new Option(options[i]['name'], options[i]['id']);
}
}
}
Finally you can add the following to your fields.ini file for the type_groups field:
[type_groups]
widget:atts
" title="Surprised" />nchange="updateTypesList(this):"
Now this code has not been tested, and I undoubtedly have the names of fields wrong, - so you will need to work with it a bit to make it work.. but this is the general strategy to take.
References:
http://www.javascriptkit.com/javatutors/selectcontent.shtml
http://www.developer.com/lang/jscript/article.php/3596836
Best regards
Steve
Hi Steve,
now I am testing with your suggestions. To verify that I am doing everything right I will give you a nearly complete overview about the things I have done so far.
In my app I have the tables:
list_event_group
l_gid (int,8) NOT NULL, auto increment PRIMARY KEY
type_group (varchar,30) NULL
list_event_type
l_tid (int,8) NOT NULL, auto increment PRIMARY KEY
L_GID (int,8) NULL
type (varchar,256) NULL
event
eid (int,8) NOT NULL, auto increment PRIMARY KEY
L_GID (int,8) NOT NULL
L_TID (int,8) NOT NULL
more fields...
Currently I am working with the table event
valuelists.ini
[list_event_group]
__sql__ = "select l_gid, type_group from list_event_group"
[list_event_type]
__sql__ = "select l_tid, L_GID, type from list_event_type"
fields.ini
other fields...
[L_GID]
widget:label = "Ereignisgruppen ID"
widget:description = "Die Ereignisgruppen ID des Ereignisses"
widget:type = "select"
vocabulary = "list_event_group"
widget:atts
nchange="updateTypesList(this);"
actions = "get_types"
[L_TID]
widget:label = "Ereignistyp ID"
widget:description = "Die Ereignistyp ID des Ereignisses"
widget:type = "select"
vocabulary = "list_event_type"
other fields...
relationships.ini
other relationship...
[list_event_group]
list_event_group.l_gid = "$L_GID"
[list_event_type]
list_event_type.l_tid = "$L_TID"
Now I took your code like above and did the following in the
http://path/to/my/app/actions Directory
I made a get_types.php and changed the field-names corresponding to my field-names:
class actions_get_types {
function handle(&$params){
if ( isset($_REQUEST['L_GID']) ){
$sql = "select l_tid, type from list_event_type where L_GID='".addslashes($_REQUEST['L_GID'])."'";
} else {
$sql = "select L_tid, type from list_event_type";
}
$res = mysql_query($sql, df_db());
if ( !$res ) trigger_error(mysql_error(df_db()), E_USER_ERROR);
header('Content-type: text/javascript');
echo '[';
$values = array();
while ( $row = mysql_fetch_assoc($res) ){
$values[] = "{l_tid:'".$row['l_tid']."', type: '".addslashes($row['type'])."'}";
}
echo implode(',',$values);
echo ']';
exit;
}
}
?>
In the
http://path/to/my/app/javascripts.ini I have the following:
var types_http = getHTTPObject();
/**
* updateTypesList
* This function is to be assigned in the onchange handler for the group types select list.
*/
function updateTypesList(list_event_group_select){
// list_event_groups_select is a reference to the list_event_group select list
var selectedGroup = list_event_groups_select.options[list_event_group.selectedIndex].value;
var url = DATAFACE_SITE_HREF +'?-action=get_types&type_group='.escape(selectedGroup);
types_http.open("GET", url);
types_http.onreadystatechange = handleUpdateTypesList;
// Assign the handleUpdateTypesList function as a handler to be called when the HTTP object receives a response from the server
types_http.list_event_group = list_event_groups_select;
// Save a reference to the list_event_groups select list in the http object so that it can be accessed from the handleUpdateTypesList function
types_http.send(null);
}
/**
* handleUpdateTypesList
* This function is called when a response is received from the HTTP object after we request the types for a particular group.
*/
function handleUpdateTypesList(){
if ( types_http.readystate == 4 ){
// We have successfully obtained the response from the server
var options = eval('(' + types_http.responseText +')');
// we now have the options that we will use to fill the 2nd select list as an array
// now let's get out select list and refill it
var list_event_type = types_http.list_event_group.form.elements['l_tid'];
// We obtain a reference to the type_id select list (the field is named l_tid so I changed it).
// Clear the existing options in the types list.
for ( var i=0; i list_event_type.options[i] = new Option(options[i]['type'], options[i]['l_tid']);
}
}
}
When doing all this, whats happening is:
In my application new record form I choose the list_event_group select and select an item.
The list_event_type select then stays empty and in my IE status bar I get a JavaScript-Error whose details say: list_event_group ist undefiniert ("is undefined" in english, I suppose).
Where did I go wrong here?
Thank you again
Posted: Tue May 15, 2007 7:32 am