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

nsak · July 2014

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 · July 2014

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 · July 2014

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 · July 2014

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 · July 2014

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 · July 2014

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 · July 2014

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 · August 2014

OK, thanks a lot Allan!

nsak · August 2014

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 · August 2014

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 · August 2014

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

nsak · August 2014

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 · August 2014

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 · August 2014

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 · August 2014

Sure.

nsak · August 2014

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 · August 2014

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 · September 2014

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 · September 2014

'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 · September 2014

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 · September 2014

'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 · September 2014

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 · October 2014

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

allan · October 2014

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 · October 2014

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 · October 2014

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 · October 2014

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

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

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

Replies

Howdy, Stranger!

Categories

DataTables

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

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

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables