possible to "catch" a javascript-variable to put it into php

[Markus]

Yes. index.php is a string so it has to be inside quotes. Right now javascript is treating it like a variable.

i.e. It thinks that you are referring to variable named 'index' which is an object that has a member variable 'php'... so it is complaining that the 'index' variable has no index 'php'.

If that makes sense.
Best regards
Steve

OK. I changed it again and now it is:

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;
var url = 'index.php?-action=get_types&type_group='+selectedGroup;

alert ("" +url+ ""); // shows the url, which is now: index.php?-action=get_types&type_group=2

alert ("" +types_http+ ""); // shows [objekt XMLHttpRequest]

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 ){
alert ("Hello");
// We have successfully obtained the response from the server
if ( types_http == null ) types_http = getHTTPObject();

alert ("" +types_http.responseText+ "");

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']);
}
}

}

The line
alert ("" +url+ ""); // shows the url, which is now: index.php?-action=get_types&type_group=2
is correct now, I think.

No errors in firefox but no results either. Second select remains (Please select...) No alerts of function handleUpdateTypesList show up.

I am too tired now to think about it. I will try and test again tomorrow.

Markus

[Markus]

Hi steve,

In my javascript.js I now have:

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 = 'index.php?-action=get_types&type_group='+selectedGroup;

alert ("" +url+ ""); // shows the url, which is now: index.php?-action=get_types&type_group=2

alert ("" +types_http+ ""); // shows [objekt XMLHttpRequest]

types_http.open("GET", url); // SEEMS NOT TO WORK


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 ){
alert ("Hello");
// We have successfully obtained the response from the server
if ( types_http == null ) types_http = getHTTPObject();

alert ("" +types_http.responseText+ "");

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']);
}
}

}


When I copy the url index.php?-action=get_types&type_group=2 directly into the browser I get an array back which is like

[{l_tid:'7', type: 'UmrŸstkonzept'},{l_tid:'8', type: 'Sonderkomponenten'},{l_tid:'9', type: 'Bedienungskomfort'},{l_tid:'10', type: 'Anpassungen und Verbesserungen'}]

These are the values I want to have in my second select when preselected type_group 2 in first select. This means, my get_types.php should be ok. right?

Only the url does not change when doing the select in the form. Second select remains (Please select..) and no action is called.

We could not be so far from the solution now. What is still wrong here?

Markus

[shannah]

A couple of things we can add for completeness.Ê

1. Add the third parameter to the open() method to explicitly state that we are doing an asynchronous call.

e.g.

types_http.open("GET", url, true);

2. Add more alert statements in the handleUpdate...() function .. even before the first 'if' statement, so you will know for sure if the handler is being called.

3. Change the way the the handleUpdateTypesList() function is defined, so it is explicitly assigned to a variable.

e.g. instead of

function handleUpdateTypesList(){

we have

var handleUpdateTypesList = function(){

Javascript can be pesky...

[Markus]

A couple of things we can add for completeness.

1. Add the third parameter to the open() method to explicitly state that we are doing an asynchronous call.

e.g.

types_http.open("GET", url, true);

2. Add more alert statements in the handleUpdate...() function .. even before the first 'if' statement, so you will know for sure if the handler is being called.

3. Change the way the the handleUpdateTypesList() function is defined, so it is explicitly assigned to a variable.

e.g. instead of

function handleUpdateTypesList(){

we have

var handleUpdateTypesList = function(){

Javascript can be pesky...

>

Thank you again, Steve.

I now have changed the code like this:

//ORIGINAL-FUNKTIONEN
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;
var url = 'index.php?-action=get_types&type_group='+selectedGroup;

alert ("" +url+ ""); // shows the url, which is now: index.php?-action=get_types&type_group=2 ;

alert ("" +types_http+ ""); // shows [objekt XMLHttpRequest]

types_http.open("GET", url, true);


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(){
var handleUpdateTypesList = function(){
alert ("Hello 1");
if ( types_http.readystate == 4 ){
alert ("Hello 2");
// We have successfully obtained the response from the server
if ( types_http == null ) types_http = getHTTPObject();

alert ("" +types_http.responseText+ "");

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']);
}
}

}

Now we have to deal with the handleUpdateTypesList - Thing i suppose. It is kind of funny what happens but there is always a reason why, right?

When I choose some value in the first select all my alerts show up until the first alert ("Hello 1"); in handleUpdateTypesList.

This one shows up 4 times and then nothing more happens. No alert ("Hello 2"); or alert ("" +types_http.responseText+ ""); ever shows up.

Second selelect remains empty (Please select...). Does that mean that the if ( types_http.readystate == 4 ){ condition returns false?
We do not obtain a server response. What to try next?

Best regards

Markus

[shannah]

I really hate to swear... but... SHIT!

I'm sorry I put you through this.. the problem is

if ( types_http.readystate == 4 ){

should be

if ( types_http.readyState == 4 ){

(Note the capital 'S').

That should fix the issue -- or at least get us to the next step of debugging.

Reference: http://www.w3schools.com/xml/xml_http.asp

-Steve

[Markus]

I really hate to swear... but... SHIT!

I'm sorry I put you through this.. the problem is

if ( types_http.readystate == 4 ){

should be

if ( types_http.readyState == 4 ){

(Note the capital 'S').

That should fix the issue -- or at least get us to the next step of debugging.

Reference: http://www.w3schools.com/xml/xml_http.asp

-Steve

>

Wow it's going on, now we have the following:

/**
* 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(){
var handleUpdateTypesList = function(){
alert ("Hello 1");
if ( types_http.readyState == 4 ){
alert ("Hello 2");
// We have successfully obtained the response from the server
if ( types_http == null ) types_http = getHTTPObject();

alert ("" +types_http.responseText+ "");

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']);
}
}

}

Same than before, but...

alert ("Hello 2"); shows up

alert ("" +types_http.responseText+ ""); gives me the array with the right values inside the alert.

Than nothing more is happening.

Some more Ideas or typos in there?

Markus

[shannah]

Same strategy as you used to get this far... find out what is in the variables.Ê May sure that types_list is actually holding a reference to the 2nd select list.

The line:

var types_list = type_group.form.elements['type_group'];

seems to indicate that it is actually referring to the first select list.

etc...

Find out what is in the variables.

[Markus]

Same strategy as you used to get this far... find out what is in the variables. May sure that types_list is actually holding a reference to the 2nd select list.

The line:

var types_list = type_group.form.elements['type_group'];

seems to indicate that it is actually referring to the first select list.

etc...

Find out what is in the variables.

Hoooooray, it works! Thanks very much for all your patience. Seems you are not only a good programmer but a very patient teacher too. And I think I understood at least a little bit of this JavaScript sources.

My last code of handleUpdateTypesList function is:

/**
* 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(){
var handleUpdateTypesList = function(){

if ( types_http.readyState == 4 ){
// We have successfully obtained the response from the server

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

//alert ("" +types_http.responseText+ ""); // gives out an array of keys and values

var options = eval('(' + types_http.responseText +')');
// we now have the options that we will use to fill the 2nd select list as an arrays
// now let's get out select list and refill it

var types_list = type_group.form.elements['L_TID']; //Loads right values into L_TID select
// We obtain a reference to the L_TID select list.
// 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']);
}
}

}

If you are working on things like this to make them a feature in one of the next releases remember we had this line in updatesTypesList function where we skipped

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

and put in the static

var url = 'index.php?-action=get_types&type_group='+selectedGroup;

Would be nice to have it dynamic in the future. For me and for now I think it works fine with the static code.

And one little problem I have left. I can not really understand but it has to do with german special characters in my database values.
There are special characters in valuelist one as well as in valuelist two. The ones in the first select got displayed right, the ones in the second select got displayed wrong e.g. with a question mark instead of the special character. Why is it different and could I put something in my code to avoid this?

Many many thanks again for this. I have a few more questions but on other subjects so I will start a new thread for them.

Markus

[shannah]

For the weird characters, this is because the output is returned in UTF-8 but we forgot to tell that to javascript.

You can remedy this by adding the following to the beginning of your get_types action:

$app =& Dataface_Application::getInstance();

header('Content-type: text/javascript; charset='.$app->_conf['oe']);

$app->_conf['oe'] stores the output encoding for the application which is probably UTF-8 right now. This should fix the issue.

In any case I'm glad to hear it's all working for you. Javascript can be very painful and frustrating at times, but it is satisfying when it starts working. If you are inclined, perhaps you could write a short "how-to" about your experiences here to help users who want to achieve the same thing.

Best regards

Steve

[Markus]

For the weird characters, this is because the output is returned in UTF-8 but we forgot to tell that to javascript.

>

You can remedy this by adding the following to the beginning of your get_types action:

>

$app =& Dataface_Application::getInstance();

>header('Content-type: textjavascript; charset='.$app->_conf['oe']);

>

$app->_conf['oe'] stores the output encoding for the application which is probably UTF-8 right now. This should fix the issue.

>

In any case I'm glad to hear it's all working for you. Javascript can be very painful and frustrating at times, but it is satisfying when it starts working. If you are inclined, perhaps you could write a short "how-to" about your experiences here to help users who want to achieve the same thing.

>

Best regards

>

Steve

Hi Steve,

I put your code on top of my get_types action but I fear my document ist not UTF-8 encoded.

When I look into my source I find (I changed ? to QUESTIONMARK for displaying the code here):









in the header which is the encoding of Dataface_Main_Template.html and should be changed in the {$ENV.APPLICATION.oe} environment-variable, I suppose. So my question because I don't want to destroy something in my app: How and where can I change the {$ENV.APPLICATION.oe} sidewide to UTF-8 ?

Concerning the How-To on this thread I can do that when I have a little bit more time then right now where I have to work even at the weekend. I will keep that in mind.

Best regards

Markus

[Markus]

I hope this will work now. Here is the missing code from the last posting:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	
			

[shannah]

Hi Markus,
You just need to enable unicode in your application: http://framework.weblite.ca/documentation/how-to/unicode

Although if unicode is not already enabled, then this may not be what is causing the characters to turn up funny.

-Steve

[Markus]

Hi steve,

i put that two lines in my conf.ini but i got the same source like above which means encoding is ISO-8859-1

What could it be then?

Kind regards

Markus

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	
								

[shannah]

Did you put it at the beginning of your conf.ini file or somewhere later on?Ê It has to go at the very beginning.

-Steve

[Markus]

Hi Steve,
yes I put it at the very beginning and I tried something else.
I changed my Dataface_Main_Template.html in the two lines where $ENV.APPLICATION.oe is:
{if !$ENV.APPLICATION_OBJECT->main_content_only}
Êto {if !$ENV.APPLICATION_OBJECT->main_content_only}
and

to
but when I load it on the server and reload my page I get still ISO-8859-1 in both places in my source code.
It seems that none of both trials lead to success. Is there some server-cache I have to empty before or is the problem somewhere else?
Kind regards
Markus