How to build two drop-down lists that are interdependent?

nsak

hi,
through the generator I created a table with two "select" fields. The first field sets the "node" parameter to the new entry, whereas the second one sets the "sensor" parameter. The options of the node_list come from a node_table and those of the sensor-list from a sensor_table. However, these two tables (all on the same database) are linked through a node-sensor table. Specifically, that table defines which sensors (of the sensor_table) are included in each node (of the node_table). Now, what I want is, after selecting a node from the node_list, to select a sensor from the sensor_list, but I want the sensor_list to show only those sensors that are included in the node that I 've just selected.
Any ideas on how to do that?
thanks!

nsak

also, in order to create the first list, I followed the corresponding example on joined tables. So I would like to build upon that.

allan

Hi,

To do this you would use the field().node() method to attach a jQuery listener to the first select element, which would in turn update the second as needed. For example:

$('select', editor.field('node_list')).on( 'change', function () {
  var data = ... get the data via $.ajax or whatever

  editor.field( 'sensor_list' ).update( data );
} );

See also the select field type documentation for details on the update() method.

Allan

nsak

So, if I am not mistaken, the variable 'data' points to the 'sensors' that are included in the selected 'node', correct? But how can I identify which 'sensor' has been selected and then, communicate with the server to get the 'sensors' I want, and all that with javascript?

allan

data is just an example - you might get it from Ajax, or from anywhere else. To get the selected value of the node_list you could simply use $(this).val() or editor.field('node_list').val().

Allan

nsak

OK, I see. One last thing: I am not sure how to use ajax in order get the data I want.
Any suggestions on that? Thanks a lot!

allan

Have you used jQuery's $.ajax() method before? Personally, if jQuery is available, I'd always use that: http://api.jquery.com/jQuery.ajax/ .

Allan

nsak

OK, thanks a lot Allan!

nsak

Allan hi again,

regarding the interdependent lists I want to build, I have trouble updating the 'sensor_list' field. Specifically, I make the ajax request and I query the 'sensor_table' in order to get the data I need (i.e. the SensorID and the sensor name). I store the result of this query in the $result variable. Now, how can I pass the $result back to the 'success' function of the request (and also in what kind of format), in order to update with it the 'sensor_list' field?

thanks!!

allan

Your script should return valid JSON which will be passed to jQuery's success callback automatically as the first parameter.

Regarding the format - the documentation for select defines the formats that can be used.

Allan

nsak

I see, so if I use 'json_encode()' am I ok?

nsak

Actually, I managed to pass the data to the success function but, still, in the drop-down list , instead of the sensors name, I see 'undefined'.
Any ideas on why is that?

allan

I see, so if I use 'json_encode()' am I ok?

If you are using PHP and you echo the string returned from json_encode() then yes.

I see 'undefined'. Any ideas on why is that?

I would need a link to the page to be able to see what is going wrong. Likely the data isn't in one of the required formats.

Allan

nsak

The development for the time is being done locally, so I cannot give you a link.
May I copy-paste some parts of the code here?
(like the PHP file pointed by the ajax request or some part of the main js file)

allan

Sure.

nsak

Allan sorry for the delay,

here is the php used by the ajax request:

//
$query = "SELECT SensorID,Variable FROM sensors WHERE SensorID IN (SELECT SensorID FROM nodesensors WHERE NodeID=2)";

$result = mysql_query($query, $con) or die('query not made');
    
while ($row = mysql_fetch_assoc($result)) {
    $sensors[] = $row;
}
    
echo json_encode($sensors);
//

In the 'sensor_list' I want to use the SensorID as value and the Variable as the label.

Here is the ajax request itself:

//
$('select', editor.field('manage.node').node()).on('change', function(){
                
    var node_selected = editor.field('manage.node').val();
                
    if (node_selected!=0 & node_selected!=null){
        $.ajax({
            type: "POST",
            url: "php/fetch_sensors.php",
            data: node_selected,
            dataType:'json',
            success: function( options ){
            editor.field('manage.sensor').update( options );
                }
             });
            }
       });
//

and, finally, part of the code from the main php file:

//
if ( ! isset($_POST['action']) ) {
    $data['nodes'] = $db
            ->selectDistinct( 'nodes', 'NodeID as value, Desc as label' )
        ->fetchAll();
    
    $data['sensors'] = $db
        ->selectDistinct( 'sensors', 'SensorID as value, Variable as label' )
        ->fetchAll();
    }
echo json_encode($data);
//

nsak

Instead of 'WHERE NodeID=2', it is 'WHERE NodeID=node_selected'.
2 was just an example to see if it would work, and it didn't.

allan

The Ajax part looks fine. Can you link me to the page so I can debug it? Failing that, what is the value of options in the success function?

Allan

nsak

'Options' is what the php file 'fetch_sensors.php' returns to the ajax call, to the success function. I want 'options' to be json pairs of sensor_id's and sensors_names, with which I am going to update the sensor_list.
So, I use "echo json_encode($sensors);" to automatically return the data to the success function. Should this be done in a different way?
(There is no page yet online...)

allan

Thanks for the explanation. What is the value of $sensors? i.e. what is the JSON encoded object that the success function sees?

Allan

nsak

'Sensors' is, or at least I want it to be, practically value - label pairs formatted as json. The value is the 'SensorID' and the label the 'Variable', both of which come from the 'sensor' table on the database, where each sensor has an id (SensorID) and a name ('Variable'). I want to use those pairs to update the sensor_list and use the SensorID as the value and the Variable as the label.

Do I implement this correctly?

Thanks a lot for your time!!

allan

I see, so you have an array which looks like:

[
   { "SensorID": ..., "Variable": ... },
   { "SensorID": ..., "Variable": ... },
   ...
]

The problem with that is that Editor doesn't know about the parameters called SensorID and Variable. It uses the parameters label and value. There are a couple of other formats that can be used for select, but that is the main one. See select options documentation.

Allan

nsak

So how can I make the array look like it should?
Thanks!

allan

You would use the label and value parameter names, rather than SensorID and Variable.

There are a few examples in the select documentation.

Allan

nsak

Ok..thanks a lot Allan.
One more thing, though...when I replace "NodeID=2" with "NodeID=node_selected" (node_selected is the parameter passed along with the ajax call) it doesn't work. Is there anything wrong with the way I use this parameter??

allan

I presume you are passing in $_POST['node_selected'] rather than just node_selected? Assuming I understand the problem correctly and you are passing in a number from the POST data (or GET if you are using GET parameters for it).

Remember to escape it or cast as an integer (if it is an integer) as well for security.

Allan

nsak

Ok, great...it works now.
Thanks!