[SOLVED] How to update a select list based on value chose in another select list ?

mkleinosky

I want to ajax call to fetch json data to update the select list of district based on the selected value of diocese
(each diocese has several districts under it)

dtajax_read_district.php returns something like:

{"data":[{"district":"Nyarugenge"},{"district":"Kicukiro"},{"district":"Gasabo"},{"district":"Bugesera"},{"district":"Gakenke"},{"district":"Rulindo"}],"options":[]}

Code:

$( editor.node( 'diocese' ) ).on( 'change', function () {

editor.field( 'district').update( 'dteditor/php/dtajax_read_district.php?diocese=<selected-value-of-diocese>' );
} );

I need to
1. put the selected value of diocese into <selected-value-of-diocese>
2. replace the select list values of ''district' with the list in the json array

I expect this is trivial and when I get it I will understand DT/Editor a lot more

mkleinosky

figured it out - shown below

It can be used to link as many dependent select lists as one likes...
If I understood the dependent thing, I could probably do it more nicely :-)

mkleinosky

Here is my - probably inelegant - solution:

AJAX ========================

$diocese = $_GET["diocese"];
require "DataTables.php"  ; 
$sql="SELECT distinct district from thealthctr where diocese ='".$diocese."' order by district";
 $result = $db->sql( $sql);
$data=$result->fetchAll(); 
$mylist="";
foreach ($data as $d) {
   $mylist.='"'.$d['district'].'",';
  }
$mylist=rtrim ($mylist , ",");
$mylist ="[".$mylist."]";
 echo $mylist; 

==================================

$(document).ready(function() {
  editor = new $.fn.dataTable.Editor( {
        ajax: "dteditor/php/dtajax_thealthctr.php",
        table: "#thealthctr",
        idSrc: "thealthctrid",
        fields: 
     [
     { "label": "Diocese",   "name": "diocese" ,  "type":"select",  "options": [
        "select Diocese", "Butare","Byumba","Cyangugu","Gikongoro", "Kabgayi","Kibungo","Kigali", "Nyundo","Ruhengeri"   ]},
    { "label": "District",  "name": "district" , "type":"select",  "options": [ "district", ""   ]}

]
}),

$( editor.node( 'diocese' ) ).on( 'change', function () {
  var diocese = editor.field( 'diocese').val();
  $.getJSON('/dteditor/php/dtajax_read_district.php?diocese=' + diocese,
   function(data) {     editor.field( 'district').update( data );   }
  );
} );

allan

Hi,

Good to hear you found a way of doing it. dependent() would make your code a little simpler on the client-side, but it is basically the same thing.

Allan

mkleinosky

Yes, My brain could not figure out dependent without a precise example :-(
Thanks for this great system!