possible to “catch” a javascript-variable to put it into php

Archived from the Xataface Users forum.

Markus — Tue May 15, 2007 7:32 am

Hello df-users, hello steve,

i wonder wether it could be possible to “catch” a javascript variable and use it in a php-function. The Thing is, i tested your little Happy Birthday - Alert JavaScript i found somewhere here. I changed it a little bit to get an id out. When doing so and combining with a select in fields.ini and a valuelist i got an alert with the id of the corresponding record onchange of my select field.

In order to have dynamic valuelists could i somehow get this id into a php-function? I know, there could not be dynamic valuelists, i read it somewhere. But if i could kind of translate this JavaScript variable into php, maybe it works?

I want to accomplish the following: Given i have two tables linked with a foreign_key ID one the source one the destination table. Each record in the source table has some related records in the destination table. In my new record form where i have two selects i want to select one value in the first select and then the second select should display only the related values.

Normally i can not get this until something is saved in my db, i know. But would it be possible using either the above mentioned javascipt-variable or doing some other javascript action with an widget:attsnchange of the first select? I tried a little but could no achieve something.

Right now i am still using 0.6.13r4 instead of 0.7 version.

Thank you for your help, hopefully you understand, what i mean

Markus

shannah — Tue May 15, 2007 11:58 am

Ok.. I think I see what you mean.

Let me recap so that I can make sure that I understand.

On your form you have:

[Select_list_A]
widget:type=select
vocabulary=valuelist_1

[Select_list_B]
widget:type=select
vocabulary=valuelist_2

And you want the values in valuelist_2 to depend on the value chosen for Select_list_A?

If this is the case, then there is a bit of stickiness you have to deal with.ÃŠ If feasible and possible, I would make valuelist_2 contain all of the possible values that Select_list_B can take on.ÃŠ Then just use javascript to filter them.

This can still be a bit tricky.ÃŠ I have done a few maneuvres like this one before… I’ll see if I can track down some examples.

Dataface 0.7 has some features to make it easy to do this with checkboxes, but I haven’t gotten around to adding the “simple” way of doing it to select lists.ÃŠ One of the coming versions will allow you to do this 100% in the ini file, but it may be a few months before this gets added and released.

-Steve

Markus — Wed May 16, 2007 3:37 am

Thank you for your hints. My application is structured like you write. All possible values that select_list_B can take on are in there.

The values from select_list_A are from list_event_group table which is related to the table list_event_type.

TABLE list_event_group has the structure:

l_gid (int, auto increment)
type_group (varchar)

Table list_event_type has

l_tid (int, auto increment)
L_GID (int, relation to Table A)
type (varchar)

Every type_group in Table A has some related types in Table B

I do something like

[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”

in my valuelists.ini of a THIRD TABLE called events and has L_GID, L_TID as foreign keys.

But this gets all the data in Select_list_B instead of only the related ones.

And I can not use a $l_gid in the valuelists.ini like
__sql__ = “select l_tid, L_GID, type from list_event_type WHERE L_GID=$l_gid”

This because there is no l_gid submitted when jumping from SELECT A to SELECT B, right?
This l_gid variable I have to get somehow with javascript.

Am i right until here?

The problem ist the javascript filter because i am not really deep into javascript. So if you could find an example I can learn from would be great.

Maybe there are other solutions with version 0.71 I have installed now. You mentioned checkboxes. This would be an opportunity instead of select A maybe because there are only 5 values in there.

Thank you for your patience once more

Markus

Markus — Thu May 24, 2007 11:59 am

Ok.. I think I see what you mean.

Let me recap so that I can make sure that I understand.

On your form you have:

[Select_list_A]
widget:type=select
vocabulary=valuelist_1

[Select_list_B]
widget:type=select
vocabulary=valuelist_2

And you want the values in valuelist_2 to depend on the value chosen for Select_list_A?

If this is the case, then there is a bit of stickiness you have to deal with. If feasible and possible, I would make valuelist_2 contain all of the possible values that Select_list_B can take on. Then just use javascript to filter them.

This can still be a bit tricky. I have done a few maneuvres like this one before… I’ll see if I can track down some examples.

Dataface 0.7 has some features to make it easy to do this with checkboxes, but I haven’t gotten around to adding the “simple” way of doing it to select lists. One of the coming versions will allow you to do this 100% in the ini file, but it may be a few months before this gets added and released.

-Steve

Hello Steve,

I think I am a little further now but how i said before I am not a JavaScript - Enthusiast Please refer to my last posting in this thread also.

OK. I can pass the JavaScript-Variable to the URL with a little trick when opening a new browser-window and after that read it out with php which I don’t want because it is ugly.

I still have my two selects, values in select two depending on choosen values in select one.

I have a Javascript-Function in javascript.js which reads out the ID of the value in select one and puts it into a link.

The Link is http://www.mydomain.de/path/to/my/app/index.php?-action=new&-table=event&type_group=2 where type_group is the JavaScript Variable.

When I select a value from select one where i have the widget:attsnchange = “myJavascriptFunction(this.value);” in my fields.ini the Link will open in a new blank browser-window.

If I click on the Link now, which brings me back to my form, the selected value in select one is not selected anymore BUT select two shows only the values dependent on my selection in select one.
This because I have a function in the ApplicationDelegate of this table which reads out the type_group var from the URL and processes it further in a php-query.

Better than before but not perfect so far…

How can I -maybe with using actions.ini and javascript.js - files ??? for this single table- avoid that a new blank window is opened between focussing select one and select two.

I can feel there must be a solution but did not manage to find it til now.
Maybe there are other JavaScript or AJAX-specialized users here to help me out.

Thank you for all hints.

Markus

shannah — Thu May 24, 2007 12:17 pm

Hi Markus,

How do you determine which options should be available in the 2nd select?ÃŠ Do you have a naming convention for the values, or is it based on related values?ÃŠ Here’s what I generally do:
The valuelist for the 2nd select list is *big* - it holds all possible values that that 2nd field can take regardless of what is selected in the first field.
I write an onchange event handler and attach it to the first select list.ÃŠ This handler goes through the options in the second select list and hides the values that shouldn’t be shown based on what is selected in the first list.ÃŠÃŠ If you let me know how you are determining which options in the 2nd list should be selected, I can go into some more details about how to approach this.
-Steve

Markus — Fri May 25, 2007 3:00 am

Hi Markus,

How do you determine which options should be available in the 2nd select? Do you have a naming convention for the values, or is it based on related values? Here’s what I generally do:
The valuelist for the 2nd select list is *big* - it holds all possible values that that 2nd field can take regardless of what is selected in the first field.
I write an onchange event handler and attach it to the first select list. This handler goes through the options in the second select list and hides the values that shouldn’t be shown based on what is selected in the first list. If you let me know how you are determining which options in the 2nd list should be selected, I can go into some more details about how to approach this.
-Steve

Hi Steve,

Oh. I thought I had already explained (in my last but second posting). I’ll try to make it a little bit clearer. I have the so called type_group in the first select. I have the type in second select. Both valuelists come from SQL-queries of two related tables as shown above in my other posting. Each type_group has related types by a foreign key in the second valuelist. If the user selects a value (type_group) in the first (an onchange event handler is already in the fields.ini) only the relates values (type) should show up in the second. The first one should remain the selected value.

How to hide the non-related values in the second valuelist then?

Thank you for your help

Markus

shannah — Fri May 25, 2007 12:46 pm

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:

php<br /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:attsnchange=”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

Markus — Fri May 25, 2007 1:48 pm

Hi Steve,

thanks a lot for your work and the references I had a short look on. I cannot test it right now because I will go on holiday for the weekend early tomorrow but I am eager to try it when I am back. I will give you a response then.

By the way let me thank you for developing this great framework. I was thinking of testing seagull or tried dadabik before but I think dataface is the one I should use now and in future. I am nearly convinced of it. It is a little bit a pity that the community here is still very small but I hope it will grow very soon. On the long run you should not be the only one answering most of the questions by yourself. On the other hand it is really familiar here and I also like it this way

Have a nice weekend

Markus

Markus — Tue May 29, 2007 6:43 am

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:

php<br /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.javascriptkit.com/javatutors/selectcontent.shtml)
[http://www.developer.com/lang/jscript/article.php/3596836](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:attsnchange=”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:

php<br /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

shannah — Tue May 29, 2007 8:54 am

It may be objecting to adding the list_event_group member variable to the types_http object.ÃŠ Another way to accomplish this is to create a global variable called list_event group and then replace all references to types_http.list_event_group to just list_event_group.

e.g.:ÃŠ

After
var types_http = getHTTPObject();
add
var list_event_group = null;
And then replace all references to types_http.list_event_group to just list_event_group
-Steve

Markus — Tue May 29, 2007 9:06 am

Hi Steve,

some more questions occured, when I tried your code:

FIRST:

function updateTypesList(type_groups_select){
// type_groups_select is a reference to the type_groups select list

Does that mean, that I have to replace “type_groups_select” with the name of my table which is “list_event_group” and name the function updateTypesList(list_event_groups_select) ?
Does the plural or the _select within the brakes mean anything according to naming conventions in DF?

Or do I have to replace “type_groups_select” through the name of my select widget in fields.ini which is L_GID and write updateTypesList(L_GID)?

I have tried a little, but still could not get anything out of my list_event_type select field.

SECOND:

When I look into the error-console of firefox browser it says GetHTTPObject() is not defined.

Maybe this can help you to find something wrong

Best regards

Markus

Markus — Tue May 29, 2007 9:08 am

Hi Steve,

some more questions occured, when I tried your code:

Markus — Tue May 29, 2007 9:35 am

It may be objecting to adding the list_event_group member variable to the types_http object. Another way to accomplish this is to create a global variable called list_event group and then replace all references to types_http.list_event_group to just list_event_group.

e.g.:

After
var types_http = getHTTPObject();
add
var list_event_group = null;
And then replace all references to types_http.list_event_group to just list_event_group
-Steve

My code in javascript.js now:

//FUNKTIONEN ANGEPASST
var types_http = getHTTPObject();
var list_event_group = null;

/**
* updateTypesList
* This function is to be assigned in the onchange handler for the group types select list.
*/

function updateTypesList(list_event_groups_select){
// list_event_group_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&list_event_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
list_event_group = list_event_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 list_event_type = types_http.list_event_group.form.elements[‘l_tid’];
// 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 list_event_type.options[i] = new Option(options[i][‘type’], options[i][‘l_tid’]);
}
}

}

and error-console of firefox goes:

getHTTPObject() is not defined

list_event_group has no properties

Any idea?

Markus

shannah — Wed May 30, 2007 10:02 am

The getHTTPObject() function is defined in the js/ajax.js file in the dataface installation folder.ÃŠÃŠ Most likely it hasn’t been loaded yet in your document.ÃŠ If you change the following:

var types_http = getHTTPObject();

var list_event_group = null;

require(DATAFACE_SITE_URL+’/js/ajax.js’);
var types_http = null;
var list_event_group = null;

And then add the following to the updateTypesList() function:

if ( types_http == null ) types_http = getHTTPObject();

That should give the function time to be loaded before it is called.

The second error (list_event_group has no properties) is coming up because you haven’t changed the types_http.list_event_group to just list_event_group in the handler function.

-Steve

Markus — Wed May 30, 2007 10:52 am

The getHTTPObject() function is defined in the js/ajax.js file in the dataface installation folder. Most likely it hasn’t been loaded yet in your document. If you change the following:

var types_http = getHTTPObject();

var list_event_group = null;

to

require(DATAFACE_SITE_URL+’/js/ajax.js’);
var types_http = null;
var list_event_group = null;

And then add the following to the updateTypesList() function:

if ( types_http == null ) types_http = getHTTPObject();

That should give the function time to be loaded before it is called.

The second error (list_event_group has no properties) is coming up because you haven’t changed the types_http.list_event_group to just list_event_group in the handler function.

-Steve

Hi Steve,

I changed the code to:

//FUNKTIONEN ANGEPASST
require(DATAFACE_SITE_URL+’/js/ajax.js’);
var types_http = null;
var list_event_group = null;

/**
* updateTypesList
* This function is to be assigned in the onchange handler for the group types select list.
*/

function updateTypesList(list_event_groups_select){
if ( types_http == null ) types_http = getHTTPObject();
// list_event_group_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&list_event_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
list_event_group = list_event_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 list_event_type = list_event_group.form.elements[‘l_tid’];
// 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 list_event_type.options[i] = new Option(options[i][‘type’], options[i][‘l_tid’]);
}
}

}

as you said. The first error does not occur any longer. Thank you for your help. But the second one “list_event_group has no properties” is still there.

And I would like to know wether the naming in function updateTypesList, which means(list_event_groups_select) follows special naming conventions in DF? Especially the Plural and the _select. Or am I free to name it somehow. See similar question in my last but second posting.

Thank you

Markus

Markus — Tue May 29, 2007 9:06 am

Hi Steve,

some more questions occured, when I tried your code:

FIRST:

function updateTypesList(type_groups_select){
// type_groups_select is a reference to the type_groups select list

Or do I have to replace “type_groups_select” through the name of my select widget in fields.ini which is L_GID and write updateTypesList(L_GID)?

I have tried a little, but still could not get anything out of my list_event_type select field.

SECOND:

When I look into the error-console of firefox browser it says GetHTTPObject() is not defined.

Maybe this can help you to find something wrong

Best regards

Markus

Markus — Tue May 29, 2007 9:08 am

Hi Steve,

some more questions occured, when I tried your code:

Markus — Tue May 29, 2007 9:35 am

It may be objecting to adding the list_event_group member variable to the types_http object. Another way to accomplish this is to create a global variable called list_event group and then replace all references to types_http.list_event_group to just list_event_group.

e.g.:

After
var types_http = getHTTPObject();
add
var list_event_group = null;
And then replace all references to types_http.list_event_group to just list_event_group
-Steve

My code in javascript.js now:

//FUNKTIONEN ANGEPASST
var types_http = getHTTPObject();
var list_event_group = null;

/**
* updateTypesList
* This function is to be assigned in the onchange handler for the group types select list.
*/

/**
* 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 (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 list_event_type.options[i] = new Option(options[i][‘type’], options[i][‘l_tid’]);
}
}

}

and error-console of firefox goes:

getHTTPObject() is not defined

list_event_group has no properties

Any idea?

Markus

shannah — Wed May 30, 2007 10:02 am

The getHTTPObject() function is defined in the js/ajax.js file in the dataface installation folder.ÃŠÃŠ Most likely it hasn’t been loaded yet in your document.ÃŠ If you change the following:

var types_http = getHTTPObject();

var list_event_group = null;

require(DATAFACE_SITE_URL+’/js/ajax.js’);
var types_http = null;
var list_event_group = null;

And then add the following to the updateTypesList() function:

if ( types_http == null ) types_http = getHTTPObject();

That should give the function time to be loaded before it is called.

The second error (list_event_group has no properties) is coming up because you haven’t changed the types_http.list_event_group to just list_event_group in the handler function.

-Steve

Markus — Wed May 30, 2007 10:52 am

The getHTTPObject() function is defined in the js/ajax.js file in the dataface installation folder. Most likely it hasn’t been loaded yet in your document. If you change the following:

var types_http = getHTTPObject();

var list_event_group = null;

to

require(DATAFACE_SITE_URL+’/js/ajax.js’);
var types_http = null;
var list_event_group = null;

And then add the following to the updateTypesList() function:

if ( types_http == null ) types_http = getHTTPObject();

That should give the function time to be loaded before it is called.

The second error (list_event_group has no properties) is coming up because you haven’t changed the types_http.list_event_group to just list_event_group in the handler function.

-Steve

Hi Steve,

I changed the code to:

//FUNKTIONEN ANGEPASST
require(DATAFACE_SITE_URL+’/js/ajax.js’);
var types_http = null;
var list_event_group = null;

/**
* updateTypesList
* This function is to be assigned in the onchange handler for the group types select list.
*/

/**
* 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 = list_event_group.form.elements[‘l_tid’];
// 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 list_event_type.options[i] = new Option(options[i][‘type’], options[i][‘l_tid’]);
}
}

}

as you said. The first error does not occur any longer. Thank you for your help. But the second one “list_event_group has no properties” is still there.

Thank you

Markus

shannah — Wed May 30, 2007 11:20 am

Hi Markus,

None of the variables here are following any naming conventions.ÃŠ You are free to change them as you like.

A couple of tips.ÃŠ XXX has no properties, generally means that the variable is null or not initialized.ÃŠ Generally this means that we have made a mistake somewhere when we thought we had initialized it.

The list_event_group variable should have been initialized in the updateTypesList function when we set it to list_event_groups_select (which should be a reference to the first select list).

What i usually do in these cases is start inserting alert() functions in various places to see what values my variables have (this is like a poor-man’s debugger).

e.g.ÃŠ In the updateTypesList() function, try calling alert(list_event_groups_select), and see what it says (it will pop up a javascript alert).ÃŠÃŠ Try this in various places to see where we are losing it.

-Steve

Markus — Wed May 30, 2007 11:33 am

Thanks again for your tips, Steve. The alert-thing sounds pretty similar to what I know from echo in php. I will try and give you response when I am through with it. Seems that I will have to learn some JavaScript right now

Markus

shannah — Wed May 30, 2007 11:50 am

Thanks for being a pioneer here.ÃŠ I have thought about trying to add this sort of functionality simply using the fields.ini file, but I want to make sure that I do it right in a generic sort of way.. may be a few releases from now.

-Steve

Markus — Fri Jun 01, 2007 5:29 am

Hi steve,

My updateTypesList function again:

require(DATAFACE_SITE_URL+’/js/ajax.js’);
var types_http = null;
var type_group = null;

/**
* 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[type_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
type_group = 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);
}

I found out that already in the first line:
var selectedGroup = type_groups_select.options[type_group.selectedIndex].value;

my firefox error-console tells me that type_group has no properties. I can do an alert(“” +type_group+ “”) above this line and get null which is defined above and so it works.

If I put the same alert after this line nothing will be returned when changing the select. Even if I put alert(“Hello”) there, nothing happens. It seems to me that this line has a mistake in it but could not figure out where it might be. I suppose, this line should return the Index of my value, right? Cause there are 5 values, it should return either 1,2,3,4 or 5. But it does not.

It also seems that the script stops here because I never get a changed URL when selecting something from my type_groups select. The URL stays like http://pathtomyapp/index.php?-action=new&-table=event
It is somehow frustrating.

Again also the relevant part of my fields.ini of table event:

[L_TID]
widget:label = “Ereignistyp ID”
widget:description = “Die Ereignistyp ID des Ereignisses”
widget:type = “select”
vocabulary = “list_event_type”

My 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”

My relationships.ini

[list_event_group]
list_event_group.l_gid = “$L_GID”

[list_event_type]
list_event_type.l_tid = “$L_TID”

My get_types.php

Is this all correct so far? Do you have another idea, what could be wrong?

Thank you

Markus

shannah — Fri Jun 01, 2007 3:22 pm

Here is one mistake:

var selectedGroup = type_groups_select.options[type_group.selectedIndex].value;

This should be

var selectedGroup = type_groups_select.options[type_groups_select.selectedIndex].value;

Markus — Sun Jun 03, 2007 8:12 am

Here is one mistake:

var selectedGroup = type_groups_select.options[type_group.selectedIndex].value;

This should be

var selectedGroup = type_groups_select.options[type_groups_select.selectedIndex].value;

Hi steve,

thank you again. Let me resume what I have done so far by posting the code of updateTypesList again. I put some comments into the code to show, what is happening.

require(DATAFACE_SITE_URL+’/js/ajax.js’);
var types_http = null;
var type_group = null;

/**
* 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[type_groups_select.selectedIndex].value;

alert (“” +selectedGroup+ “”); // works fine, shows me the right ID of the selected value; for example 2

var url = DATAFACE_SITE_HREF +’?-action=get_types&type_group=’+selectedGroup;

alert (“” +url+ “”); // shows me the url which is: /dataface/plone_javascript_variables.js.php?-action=get_types&type_group=2 ;

alert (“” +types_http+ “”); // shows me null

types_http.open(“GET” url); // does not work until now

types_http.onreadystatechange = handleUpdateTypesList;
// Assign the handleUpdateTypesList function as a handler to be called when the HTTP object receives a response from the server
type_group = 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);
}

After I have closed all the alerts I get an error in firefox error-console: types_http has no properties

I wonder why the DATAFACE_SITE_HREF gives back /dataface/plone_javascript_variables.js.php and if this could be right?

There is no /dataface directory within my app because I have all the dataface files one step up the hierarchy on the server like:

server_root/dataface
server_root/pathtomyapp

Should I better have my application directory within the dataface directory?

So I would like to ask if this URL is right and why the types_http has no properties. I think I am not so far from a solution of my problem now but I am not enough into DF to do it on my own.

Possibly you are not working on sundays which I don’t do normally too. But I really want to find the solution and understand what is happening in my DF-application. Maybe you can help me a little more. Could be tomorrow of course

greets

Markus

shannah — Sun Jun 03, 2007 5:20 pm

Hi Markus,

This readout makes sense.ÃŠ First some responses to specific questions:
Q: “I wonder why the DATAFACE_SITE_HREF gives back /dataface/plone_javascript_variables.js.php and if this could be right?”
A: Ahh.. Yes.. This looks like a little bug in Dataface.ÃŠ I have updated my current source base to fix this bug.ÃŠ You can fix it in your version by opening the file: Dataface/templates/Dataface_Main_Template.html.ÃŠ At around Line 51, there some HTML like:

Add a couple of lines so that it becomes:

This should produce the correct url.
Q: “Should I better have my application directory within the dataface directory?”
A: No.. My preference is to do it the way you are currently doing it:ÃŠ with separate directories for dataface and your application.

The reason for the error: “types_http has no properties” is because you have removed the code that was there before to set the types_http variable to an HTTP object:
if ( types_http == null ) types_http = getHTTPObject();

I also notice a typo from the code that I made to include the ajax.js file.ÃŠ It is currently :
require(DATAFACE_SITE_URL+’/js/ajax.js’);

It should be
require(DATAFACE_URL+’/js/ajax.js’);

Best regards
Steve

Markus — Mon Jun 04, 2007 4:08 am

Dear steve,

thank you again for your explanations and changes. I made all the changes to Dataface_Main_Template.html and in my javascript.js I have now:

require(DATAFACE_URL+’/js/ajax.js’);

var types_http = null;
var type_group = null;

/**
* 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

if ( types_http == null ) types_http = getHTTPObject();

var selectedGroup = type_groups_select.options[type_groups_select.selectedIndex].value;

alert (“” +selectedGroup+ “”); //shows the Index of selectedGroup, for example 2

var url = DATAFACE_SITE_HREF +’?-action=get_types&type_group=’+selectedGroup;

alert (“” +url+ “”); // shows the url, which is: /dataface/plone_javascript_variables.js.php?-action=get_types&type_group=2 ;

alert (“” +types_http+ “”); // firefox shows [object XMLHttpRequest] ie shows [object]

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

type_group = 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
if ( types_http == null ) types_http = getHTTPObject();
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 = type_group.form.elements[‘type_group’];
// 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][‘type’], options[i][‘l_tid’]);
}
}

}

See my comments in updateTypesList function above. I don’t get any errors from firefox now but still the url does not change and the second select remains empty (please select…)

My current get_types.php is like follows (I leave the php-questionmarks)

class actions_get_types {
function handle(&$params){
if ( isset($_REQUEST[‘type_group’]) ){
$sql = “select l_tid, L_GID, type from list_event_type where L_GID=’“.addslashes($_REQUEST[‘type_group’]).”’”;
} else {
$sql = “select l_tid, L_GID, 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;
}

}

Obviously there must be something wrong with the following line in updateTypesList:

types_http.open(“GET”, url);

because it is not executed, right? I am not sure about what I can put here as an alert to check what’s happening. Maybe you know?
Please have a close look at my get_types.php if this is right. Especially I am not sure about these lines:

if ( isset($_REQUEST[‘type_group’]) ){
$sql = “select l_tid, L_GID, type from list_event_type where L_GID=’“.addslashes($_REQUEST[‘type_group’]).”’”;

and

while ( $row = mysql_fetch_assoc($res) ){
$values[] = “{l_tid:’”.$row[‘l_tid’].”’, type: ‘“.addslashes($row[‘type’]).”’}”;

Can you give me some hints again?

Markus

shannah — Mon Jun 04, 2007 8:07 am

OK.. next phase of problem solving: getting AJAX to work.ÃŠÃŠ Check a couple of things:

Put some alerts in the handleUpdateTypesList function to at least see if it ever gets called.
If handleUpdateTypesList is getting called, then you want to take a look at the response text.ÃŠ (e.g. alert(types_http.responseText).
If handleUpdateTypesList is NOT getting called, then you’ll want to take a look at the url that is being sent to types_http.open().ÃŠ Copy and paste this URL directly into your web browser and see what it gives you…ÃŠ this url should result in the output of your custom action.

Best regards

Steve

Markus — Mon Jun 04, 2007 9:07 am

OK.. next phase of problem solving: getting AJAX to work. Check a couple of things:

Put some alerts in the handleUpdateTypesList function to at least see if it ever gets called.

If handleUpdateTypesList is getting called, then you want to take a look at the response text. (e.g. alert(types_http.responseText).

If handleUpdateTypesList is NOT getting called, then you’ll want to take a look at the url that is being sent to types_http.open(). Copy and paste this URL directly into your web browser and see what it gives you… this url should result in the output of your custom action.

Best regards

Steve

Hi steve,

I tried the alerts in handleUpdateTypesList function and they won’t run.

I gave the url /dataface/plone_javascript_variables.js.php?-action=get_types&type_group=2 directly into the browser and it calls the plone_javascript_variables.js.php

The output is

// Global Plone variables that need to be accessible to the Javascripts

//portal_url = ‘http://localhost/~shannah/lesson_plans’;
portal_url = ‘/dataface’;
DATAFACE_URL = portal_url;
DATAFACE_SITE_URL = ‘/dataface’;
DATAFACE_SITE_HREF = ‘/dataface/plone_javascript_variables.js.php’;

How can I get to my custom action?