Possible to have a select field in list-view?

[meta]

Hi steve, hi all,

Using the version 1.0 beta-1 now for my second application and like the new functionality very much. Thanks for that steve.

I now would like to have a select (drop-down) field in list view. It should be filled with values from a set-field in my db and I would like to recieve calculated values (float) in another field of that table in list view depending on the value I choose from that select.

I did something like

Code: Select all

      function r_unit__renderCell(&$record){
      if ($record->strval('r_unit')){
      $r_unit = $record->display('r_unit');
      /*return $record->display('r_unit');*/
      return "<select name=\"r_unit\" id=\"r_unit\" size=\"1\"><option>$r_unit</option><option>value 2</option><option>value 3</option></select>";
      }
      }   



in my tables delegate class which gives me somehow a select field with the example values in list view. The only thing is, if I click on the select I will be redirected to the details view of that record.

What do I have to add?

The second question is: Can I have the SET-Values from my database as option-values directly in that select-field or do I have to use a valuelist instead?

Thanks for any hint
Markus

[shannah]

Hi Markus,

I'm not sure I fully understand the questions. When you click on the select it is strange that you would be redirected anywhere (unless you select a value in the select and then hit "enter"). What behavior would you like to have happen when the user chooses values from the select? Are you having dynamic calculations using javascript?

the second question is: Can I have the SET-Values from my database as option-values directly in that select-field or do I have to use a valuelist instead?

Are you referring to this select list that you are building yourself in the renderCell method? If so you are free to do whatever you want for values. You can use an SQL query, a valuelist, or even use javascript to populate your select list. I may not understand the question though.

-Steve

[meta]

Hi Steve,

to make you better understand what I mean, I put a clipping of my tables list view, where I want to have the select-field.



Problem 1) Right now it is so that if I click on the drop down where the red arrow is, I will be directed to the details view of that record.

Problem 2) What I want to achieve is, that I do a selection here and depending on that selection the field y_max_calc should change its value (0.0 is a standard value because it is a float-field). The values should be calculated through some mathematic functions in my tables DelegateClass. This should be no problem. What would be nice is, that the value changes on kind of an onChange handler (Where to put this?) so that only the field y_max_calc is poulated with the new calculated value. So I need some JavaScript.

I do not really know, how to start. Maybe you can give me some hints?

Thank you
Markus

[shannah]

Questions:
1. Is y_max_calc stored in the database, or is it a calculated field? (i.e. how is the y_max_calc field defined).

2. When you select a different option in the einheit select list should it make any changes to the database? If so, what changes? Or should it just perform some calculation based on the y_max_calc field?

[meta]

Questions:
1. Is y_max_calc stored in the database, or is it a calculated field? (i.e. how is the y_max_calc field defined).

y_max_calc is stored in my database, i.e. it is a field in that displayed table.

2. When you select a different option in the einheit select list should it make any changes to the database? If so, what changes? Or should it just perform some calculation based on the y_max_calc field?

Good question, if possible it should only perform some calculation based on the y_max_calc_field. The new value should be displayed in list view.

If it is easyer to store the new (calculated) value in the database, i.e. change the value of y_max_calc anytime I select something new in drop-down einheit it should also be not a problem. Lets say the second best solution.

Thank you
Markus

[shannah]

OK.. so when you select a different option in the select list, it takes the y_max_calc value, performs a calculation, and then replaces the y_max_calc value with the result of said calculation?

And you don't need to store the result of this calculation in the database?

This would be easiest to do in 100% javascript.

Add an onchange attribute to your select list. e.g.

Code: Select all

<select onchange="myfunction(this)">
.... etc ...
</select>


Your definition of myfunction would probably occur in a separate javascript file:

Code: Select all

function myfunction(select){
    var selectedOption = select.options[select.selectedIndex].value;
   
    ... perform some calculation here ...
}



But if you will also need to access the y_max_calc cell to get and set its value, you will probably want to place an HTML tag around the y_max_calc values with a unique ID so that you can access them from javascript.

You can do this using the renderCell method for y_max_calc in the delegate class.

e.g.

Code: Select all

function y_max_calc__renderCell(&$record){
    return '<span id="y_max_calc_'.$record->val('id').'">'.$record->display('y_max_calc').'</span>';
}


Hence we are wrapping the y_max_calc value in a <span> tag with an ID of the form y_max_calc_i where i is the ID of the record (this assumes that the table has a primary key column named 'id').

Then we can obtain the value of a particular y_max_calc with the following javascript:

Code: Select all

// Obtain the ith y_max_calc value
var y_max_calc = document.getElementById('y_max_calc_'+i).innerHTML;

// convert y_max_calc to a float
y_max_calc = parseFloat(y_max_calc);


So putting it all together, Your r_unit__renderCell() method will look like:

Code: Select all

function r_unit__renderCell(&$record){
    ...
    return '<select onchange="updateYMax(this, '.$record->val('id')).')" ...";

}


Notice that we are calling our updateYMax() function with two parameters. The first parameter 'this' refers to the select list itself. The second parameter is the ID of the current record, so that we know which y_max_calc value to work with.

And our updateYMax() function will look like:

Code: Select all

function updateYMax(select, id){
    var selectedOption = select.options[select.selectedIndex].value;

    var yMaxSpan = document.getElementById('y_max_calc_'+id);
   
    var yMaxCalc = parseFloat(yMaxSpan.innerHTML);
   
    ... perform some calculation on yMaxCalc

    ... then place the new value back into the table.
    yMaxSpan.innerHTML = yMaxCalc;
}


Or something along these lines.

One thing that seems a little strange, if I'm not misunderstanding anything, is that if y_max_calc is a calculated field, then why is it stored in the database?

Best regards


STeve

[meta]

Hi steve,

thank you so far and sorry for not answering for so long. Was very busy with other stuff.

I am not sure if I got you right last time.

The solution you suggested is very much JavaScript where I am not really into. Is there maybe another possible solution in PHP, maybe if the calculated values ARE STORED in my db?

The thing is, that I have to do calculations depending on other db-values and I completely don't know, how to get these values from my db into the JavaScript-function.

OK.. so when you select a different option in the select list, it takes the y_max_calc value, performs a calculation, and then replaces the y_max_calc value with the result of said calculation?

And you don't need to store the result of this calculation in the database?

This would be easiest to do in 100% javascript.

Add an onchange attribute to your select list. e.g.

Code: Select all

<select onchange="myfunction(this)">
.... etc ...
</select>


Your definition of myfunction would probably occur in a separate javascript file:

Code: Select all

function myfunction(select){
    var selectedOption = select.options[select.selectedIndex].value;
   
    ... perform some calculation here ...
}



But if you will also need to access the y_max_calc cell to get and set its value, you will probably want to place an HTML tag around the y_max_calc values with a unique ID so that you can access them from javascript.

You can do this using the renderCell method for y_max_calc in the delegate class.

e.g.

Code: Select all

function y_max_calc__renderCell(&$record){
    return '<span id="y_max_calc_'.$record->val('id').'">'.$record->display('y_max_calc').'</span>';
}


Hence we are wrapping the y_max_calc value in a <span> tag with an ID of the form y_max_calc_i where i is the ID of the record (this assumes that the table has a primary key column named 'id').

Then we can obtain the value of a particular y_max_calc with the following javascript:

Code: Select all

// Obtain the ith y_max_calc value
var y_max_calc = document.getElementById('y_max_calc_'+i).innerHTML;

// convert y_max_calc to a float
y_max_calc = parseFloat(y_max_calc);


So putting it all together, Your r_unit__renderCell() method will look like:

Code: Select all

function r_unit__renderCell(&$record){
    ...
    return '<select onchange="updateYMax(this, '.$record->val('id')).')" ...";

}


Notice that we are calling our updateYMax() function with two parameters. The first parameter 'this' refers to the select list itself. The second parameter is the ID of the current record, so that we know which y_max_calc value to work with.

And our updateYMax() function will look like:

Code: Select all

function updateYMax(select, id){
    var selectedOption = select.options[select.selectedIndex].value;

    var yMaxSpan = document.getElementById('y_max_calc_'+id);
   
    var yMaxCalc = parseFloat(yMaxSpan.innerHTML);
   
    ... perform some calculation on yMaxCalc

    ... then place the new value back into the table.
    yMaxSpan.innerHTML = yMaxCalc;
}


Or something along these lines.

One thing that seems a little strange, if I'm not misunderstanding anything, is that if y_max_calc is a calculated field, then why is it stored in the database?

Best regards


STeve

I have tried this but could not get any successful solution out of it

Also there remains the problem which I told you before. If I only click on the select field in my tables list view I will be directed to the details of my record e.g. It does the standard link behaviour of records in list view. How and where in my app can I change this?


Thank you a lot
Markus

[meta]

Hi Steve,

accidentally I found a solution for at least one of my problems by reading in the users forum. So I put noLinkFromListView=1 into my fields.ini for the field r_unit.
That works

Now I have a select field with 4 fix values in my tables list view. See the picture:


In my tables DC I have the following:

Code: Select all

function r_unit__renderCell(&$record){

/* Ausgabe der möglichen Optionen für die Umrechnung in der Listenansicht */
   return '<select onchange="updateYMax(this, '.$record->val('z_id').')"><option>Nm3 Biogas/t FM</option><option>Nm3 Biogas/t oTM</option><option>Nm3 Methan/t FM</option><option>Nm3 Methan/t oTM</option></select>';
}


function y_max_calc__renderCell(&$record){
   if ($record->strval('y_max_calc')){
   return '<span id="y_max_calc_'.$record->val('z_id').'">'.$record->display('y_max_calc').'</span>';   
....   
}


Now If I choose some value in the select I would like to get the value in the field y_max_calc changed by some calculations.

The JacaScript-Method you suggested I could not really understand. Sorry for that. But maybe I can do it with PHP too If I store the changed value each time into the database and then do a new query to get it out again?

I mean I have tried your suggestions and made a javascript.js in my apps directory like this:

Code: Select all


function updateYMax(select, id){
    var selectedOption = select.options[select.selectedIndex].value;

    var yMaxSpan = document.getElementById('y_max_calc_'+id);
   
    var yMaxCalc = parseFloat(yMaxSpan.innerHTML);
   
   // ... perform some calculation on yMaxCalc
   
   if (selectedOption = 'Nm3 Methan/t FM)
   ymaxCalc  = (ymax * M_Gehalt)
   if (selectedOption = 'Nm3 Biogas/t oTM')
   ymaxCalc = (ymax * oTM_FM)
   if (selectedOption = 'Nm3 Methan/t oTM')   
   ymaxCalc = (ymax * M_Gehalt x oTM_FM) 


    //... then place the new value back into the table.
    yMaxSpan.innerHTML = yMaxCalc;
}

// Obtain the ith y_max_calc value
var y_max_calc = document.getElementById('y_max_calc_'+id).innerHTML;

// convert y_max_calc to a float
y_max_calc = parseFloat(y_max_calc);



but I am not sure how to do calculations in JavaScript. Especially the calculations I need like:

Code: Select all


   if (selectedOption = 'Nm3 Methan/t FM)
   ymaxCalc  = (ymax * M_Gehalt)
   if (selectedOption = 'Nm3 Biogas/t oTM')
   ymaxCalc = (ymax * oTM_FM)
   if (selectedOption = 'Nm3 Methan/t oTM')   
   ymaxCalc = (ymax * M_Gehalt x oTM_FM) 




I am not sure about how to get the values for M_Gehalt, oTM_FM out of my DB into JavaScript to do the calculations. Also the syntax seems not to be right.

Sounds maybe very weird to you but I don't know how to better explain

Thank you for any more hints
Markus

[shannah]

Glad to hear you're making progress. If you think you know how to do it in php then probably best to use that strategy.

-Steve

[meta]

Glad to hear you're making progress. If you think you know how to do it in php then probably best to use that strategy.

-Steve

Thanks steve, I will try that first. Though the JavaScript solution sounds somehow attractive. Otherwise (with PHP) the whole page has to be reloaded, right? But maybe it is a little bit too complicated to explain that to a complete JavaScript-Idiot here in the forum...

Markus

[meta]

Glad to hear you're making progress. If you think you know how to do it in php then probably best to use that strategy.

-Steve

Hi Steve,

once again the same thread but a little bit further with my aims.
I hope you can help me with what I am trying to achieve.

I tried again the javascript-solution you suggested and everything works fine until this point.

I have the following now:

In my zentral tables DG:

Code: Select all


function block__custom_javascripts(){
echo '<script src="javascripts.js" type="text/javascript" language="javascript"></script>';
}         


function r_unit__renderCell(&$record){
   return '<select onchange="updateYMax(this, '.$record->val('z_id').')"><option>Nm3 Biogas/t FM</option><option>Nm3 Biogas/t oTM</option><option>Nm3 Methan/t FM</option><option>Nm3 Methan/t oTM</option></select>';
}


function y_max_calc__renderCell(&$record){
   if ($record->strval('y_max_calc')){
   return '<span id="y_max_calc_'.$record->val('z_id').'">'.$record->display('y_max_calc').'</span>';   
   }
}


In path/to/myapp/javascripts.js

Code: Select all

function updateYMax(select, z_id){
    var selectedOption = select.options[select.selectedIndex].value;

    var yMaxSpan = document.getElementById('y_max_calc_'+z_id);
    var yMaxCalc = parseFloat(yMaxSpan.innerHTML);

   // ... perform some calculation on yMaxCalc
      if (selectedOption == 'Nm3 Biogas/t FM') { yMaxCalc = 1};
   if (selectedOption == 'Nm3 Methan/t FM') { yMaxCalc  = 2};
   if (selectedOption == 'Nm3 Biogas/t oTM') { yMaxCalc = 3};
   if (selectedOption == 'Nm3 Methan/t oTM') { yMaxCalc = 4}; 
   
      /*if (selectedOption == 'Nm3 Methan/t FM') { yMaxCalc = Math.round(yMaxCalc)};
   if (selectedOption == 'Nm3 Methan/t FM') { ymaxCalc  = Math.round(ymaxCalc*M_Gehalt)};
   if (selectedOption == 'Nm3 Biogas/t oTM') { ymaxCalc = Math.round(ymaxCalc*oTM_FM)};
   if (selectedOption == 'Nm3 Methan/t oTM') {ymaxCalc = Math.round(ymaxCalc*M_Gehalt*oTM_FM)};*/ 

    //... then place the new value back into the table.
    yMaxSpan.innerHTML = yMaxCalc;
}

// Obtain the ith y_max_calc value
var y_max_calc = document.getElementById('y_max_calc_'+z_id).innerHTML;

// convert y_max_calc to a float
y_max_calc = parseFloat(y_max_calc);


This works with the fix values 1 2 3 4 for yMaxCalc which means the logic perfectly works without calculation.

As you can see in the outcommented part I need to do calculations on yMaxCalc with values from other related tables of my DB e.g. M_Gehalt, oTM_FM.


oTM_FM is from table analyse
M_Gehalt is from table result

Table zentrale has foreign key (R_ID, AY_ID) of both related tables.

How can I in my javascripts.js obtain the correct values for my calculation?

I have already in analyse.php:

Code: Select all

function oTM_FM__renderCell(&$record){
   if ($record->strval('oTM_FM')){
   return '<span id="oTM_FM_'.$record->val('ay_id').'">'.$record->display('oTM_FM').'</span>';   
   }
}            


and in result.php:

Code: Select all

function M_Gehalt__renderCell(&$record){
   if ($record->strval('M_Gehalt')){
   return '<span id="M_Gehalt_'.$record->val('r_id').'">'.$record->display('M_Gehalt').'</span>';   
   }
}

but as I told you I am not very good in JavaScript and have never before done calculations in Javascript.

So maybe you can give me some hints

1) How I can obtain the right related values of M_Gehalt and oTM_FM in javascripts.ini

2) If the outcommented calculations will work (syntax?)?

Thank you very much in advance

Markus

[shannah]

1) How I can obtain the right related values of M_Gehalt and oTM_FM in javascripts.ini

You will need to output the values into javascript or html in some fashion. If the values are displayed in the list view, then it would be pretty simple to wrap them in a span tag with an id which could be obtained via javascript using the getElementById method.

e.g.

For the 'foo' column, implement the renderCell method:

Code: Select all

function foo__renderCell(&$record){
    return '<span id="foo-'.$record->val('id').'">'.$record->display('foo').'</span>';
}



Then in your javascript you could obtain the value of foo by:

Code: Select all

var foo1 = document.getElementById('foo-1').innerHTML;


If foo is supposed to be an integer you may need to explicitly convert it with parseInt()

There are many alternatives also. Using the Services_JSON class it is possible to encode PHP arrays in javascript notation that you can safely output as javascript.

I won't go into all details, but here is the gist:
[code]
import('Services/JSON.php');
$json = new Services_JSON;

$arr = array( 'foo' => 2, 'bar'=>1);
$jsArr = $json->encode($arr);

echo '<script language="javascript"><!--';
echo 'var arr = '.$jsArr.';';
echo 'alert(arr["foo"];)'; // would show alert with '2'

... etc...

You can read more about JSON at http://json.org

2) If the outcommented calculations will work (syntax?)?

Looks ok on a very quick evaluation.. but its up to you to do the trial and error to get it working right.

-STeve

[meta]

Hi Steve,

thanks again.

Now I have added the two fields I need to do calculations e.g. M_Gehalt and oTM_FM to my zentrale table.

In the tables DC I have:

Code: Select all

function r_unit__renderCell(&$record){
   return '<select onchange="updateYMax(this, '.$record->val('z_id').')"><option>Nm3 Biogas/t FM</option><option>Nm3 Biogas/t oTM</option><option>Nm3 Methan/t FM</option><option>Nm3 Methan/t oTM</option></select>';
}


   
function M_Gehalt__renderCell(&$record){
    if ($record->strval('M_Gehalt')){
    return '<span id="M_Gehalt_'.$record->val('z_id').'">'.$record->display('M_Gehalt').'</span>';
    }
}

function oTM_FM__renderCell(&$record){
   if ($record->strval('oTM_FM')){
   return '<span id="oTM_FM_'.$record->val('z_id').'">'.$record->display('oTM_FM').'</span>';
   }
}       

function y_max_calc__renderCell(&$record){
   if ($record->strval('y_max')){
   return '<span id="y_max_'.$record->val('z_id').'">'.$record->display('y_max').'</span>';   
   }
}


My javascripts.js looks like

Code: Select all


function updateYMax(select, z_id){
    var selectedOption = select.options[select.selectedIndex].value;
   
   var z_id;
   var yMax;

   var yMaxSpan = document.getElementById('y_max_'+z_id);
    var yMax = parseFloat(yMaxSpan.innerHTML);
   
   // ... perform some calculation on yMaxCalc
   /* Runden in JavaScript geht nur mit (wert*100)/100 entspricht 2 Nachkommastellen */
   
      if (selectedOption == 'Nm3 Biogas/t FM') {
      yMaxCalc=Math.round(yMax*100)/100};
   if (selectedOption == 'Nm3 Methan/t FM') {
      yMaxCalc=Math.round(yMax*M_Gehalt*100)/100};
   if (selectedOption == 'Nm3 Biogas/t oTM') {
      yMaxCalc=Math.round(yMax*oTM_FM*100)/100};
   if (selectedOption == 'Nm3 Methan/t oTM') {
      yMaxCalc=Math.round(yMax*M_Gehalt*oTM_FM*100)/100};

    //... then place the new value back into the table.
    yMaxSpan.innerHTML = yMaxCalc;
}

var z_id;
var y_max_calc;
var oTM_FM;
var M_Gehalt;

// Obtain the ith oTM_FM value
var oTM_FM = document.getElementById('oTM_FM_'+z_id).innerHTML;

// convert oTM_FM to a float
oTM_FM = parseFloat(oTM_FM);

// Obtain the ith M_Gehalt value
var M_Gehalt = document.getElementById('M_Gehalt_'+z_id).innerHTML;

// convert M_Gehalt to a float
M_Gehalt = parseFloat(M_Gehalt);

// Obtain the ith y_max_calc value
var y_max_calc = document.getElementById('y_max_'+z_id).innerHTML;

// convert y_max_calc to a float
y_max_calc = parseFloat(y_max_calc);

When I try this in my tables list view, e.g. change the select field instead of a value I will get NaN.

The error console of firefox says:
document.getElementById('y_max_'+z_id) has no properties

even before I start to do anything, means when I refresh the page in browser.

oTM_FM and M_Gehalt are as well floats that's why I use parseFloat() again.

Any Idea?

Markus

[shannah]

When I try this in my tables list view, e.g. change the select field instead of a value I will get NaN.

NaN simply means "Not a number". Usually this comes about if you have performed some arithmetic calculation on a non-number, or you've divided by zero - or something like that.

The error console of firefox says:
document.getElementById('y_max_'+z_id) has no properties

This is likely because you haven't set z_id to any particular value at this point. My guess is that you are indending z_id to contain some integer.

-STeve

[meta]

Hi Steve,

Thank you for your quick answer. I think I was going wrong when having defined some variables after the function.

Fortunatedly Martin helped me out and now I have restructured updateYMax().

It looks like this now:

Code: Select all

function updateYMax(select, z_id){
    var selectedOption = select.options[select.selectedIndex].value;
   
   var z_id;
   var yMax;
   var yMaxCalc;
   var z_id;
   var y_max_calc;
   var oTM_FM;
   var M_Gehalt;
   
   // Obtain the ith oTM_FM value
   var oTM_FM = document.getElementById('oTM_FM_'+z_id).innerHTML;
   
   // convert oTM_FM to a float
   oTM_FM = parseFloat(oTM_FM);
   
   // Obtain the ith M_Gehalt value
   var M_Gehalt = document.getElementById('M_Gehalt_'+z_id).innerHTML;
   
   // convert M_Gehalt to a float
   M_Gehalt = parseFloat(M_Gehalt);
   
   // Obtain the ith y_max_calc value
   var y_max_calc = document.getElementById('y_max_'+z_id).innerHTML;
   
   // convert y_max_calc to a float
   y_max_calc = parseFloat(y_max_calc);


   var yMaxSpan = document.getElementById('y_max_'+z_id);
    var yMax = parseFloat(yMaxSpan.innerHTML);
   
   // ... perform some calculation on yMaxCalc
   /* Runden in JavaScript geht nur mit (wert*100)/100 entspricht 2 Nachkommastellen */
   
      if (selectedOption == 'Nm3 Biogas/t FM') {
      yMaxCalc=Math.round(yMax*100)/100};
   if (selectedOption == 'Nm3 Methan/t FM') {
      yMaxCalc=Math.round(yMax*M_Gehalt*100)/100};
   if (selectedOption == 'Nm3 Biogas/t oTM') {
      yMaxCalc=Math.round(yMax*oTM_FM*100)/100};
   if (selectedOption == 'Nm3 Methan/t oTM') {
      yMaxCalc=Math.round(yMax*M_Gehalt*oTM_FM*100)/100};

    //... then place the new value back into the table.
    yMaxSpan.innerHTML = yMaxCalc;
}


All the calculations work at first selection.
But than, when I select another option, y_max_calc is calculated with the value it became before (after first selection). Then every calculation wents wrong.

So maybe you know how to kind of reset the value each time I have made a selection to the initial value.

If there is a solution everything will be fine for my purposes

Thanks a lot
Markus