DropDown with onchange event

I want to ask about if i want make dropdown with onchange event, so basically for every diferent option in dropdown value it will show diferent data, anyone can help me with the basic code?

I want to ask about if i want make dropdown with onchange event, so basically for every diferent option in dropdown value it will show diferent data, anyone can help me with the basic code?

Hi,

I hacked together the below javascript code using x-editable and DataTables, the way it works is the following:

- on page load the user is presented with a data table, for each row, there are 2 columns
- user has to select a value in column1 (drop-down) which will make the field in column 2 an editable drop-down as well.

Code:

   function editable() {
           // turn to inline mode
           $.fn.editable.defaults.mode = 'inline';
           $('.dropdown').editable({
               url: 'http://datamodel.info/index.php/workflow/ajax_mdg_ui_remove/',
               showbuttons: false,
               source: 'http://datamodel.info/index.php/workflow/ajax_mdg_entity_list/',
               params: function (params) {  //params already contain `name`, `value` and `pk`
                   var data = {};
                   data['field_id'] = $(this).data('pk');
                   data['wf_object'] = 'wf_customer';
                            data['value'] = params.value;
                   return data;
               },
               success: function (response, newValue) {
                   $id = $(this).data('pk');
                   $('#wfeditable2_' + $id).editable.defaults.mode = 'inline';
                   $('#wfeditable2_' + $id).editable('option', 'showbuttons', false);
                   $('#wfeditable2_' + $id).editable('option', 'params', function (params) {  //params already contain `name`, `value` and `pk`
                       var data = {};
                       data['field_id'] = $(this).data('pk');
                       data['entity_type'] = newValue;
                       data['wf_object'] = 'wf_customer';
                       data['attribute'] = params.value;
                       data['comment'] = $(this).data('table') + '-' + $(this).data('field');
                       return data;
                   }
                   );
                   $('#wfeditable2_' + $id).editable('option', 'url', 'http://datamodel.info/index.php/workflow/ajax_mdg_entity_update/' + newValue);
                   $('#wfeditable2_' + $id).editable('option', 'source', 'http://datamodel.info/index.php/workflow/ajax_mdg_attirbute_list/' + newValue);
                   $('#wfeditable2_' + $id).editable('setValue', null);
               }

           });
       }

I want to ask about if i want make dropdown with onchange event, so basically for every diferent option in dropdown value it will show diferent data, anyone can help me with the basic code?

Hi,

I hacked together the below javascript code using x-editable and DataTables, the way it works is the following:

- on page load the user is presented with a data table, for each row, there are 2 columns
- user has to select a value in column1 (drop-down) which will make the field in column 2 an editable drop-down as well.

Code:

   function editable() {
           // turn to inline mode
           $.fn.editable.defaults.mode = 'inline';
           $('.dropdown').editable({
               url: 'http://datamodel.info/index.php/workflow/ajax_mdg_ui_remove/',
               showbuttons: false,
               source: 'http://datamodel.info/index.php/workflow/ajax_mdg_entity_list/',
               params: function (params) {  //params already contain `name`, `value` and `pk`
                   var data = {};
                   data['field_id'] = $(this).data('pk');
                   data['wf_object'] = 'wf_customer';
                            data['value'] = params.value;
                   return data;
               },
               success: function (response, newValue) {
                   $id = $(this).data('pk');
                   $('#wfeditable2_' + $id).editable.defaults.mode = 'inline';
                   $('#wfeditable2_' + $id).editable('option', 'showbuttons', false);
                   $('#wfeditable2_' + $id).editable('option', 'params', function (params) {  //params already contain `name`, `value` and `pk`
                       var data = {};
                       data['field_id'] = $(this).data('pk');
                       data['entity_type'] = newValue;
                       data['wf_object'] = 'wf_customer';
                       data['attribute'] = params.value;
                       data['comment'] = $(this).data('table') + '-' + $(this).data('field');
                       return data;
                   }
                   );
                   $('#wfeditable2_' + $id).editable('option', 'url', 'http://datamodel.info/index.php/workflow/ajax_mdg_entity_update/' + newValue);
                   $('#wfeditable2_' + $id).editable('option', 'source', 'http://datamodel.info/index.php/workflow/ajax_mdg_attirbute_list/' + newValue);
                   $('#wfeditable2_' + $id).editable('setValue', null);
               }

           });
       }

can u explain it in more details which part i need to edit the code and put in view/controllers.

and also what library i need to import?

im already wrote some code for dropdown with onchange event but the problem is when i refresh it, it doesnt show the data but after i select different value in dropd down its show the data

View

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function () {
            $('#divTahunAjar select').change(function () {
                var selState = this.value; //value from dropdown tahun ajar
                console.log(selState);
                $.ajax({  
                    url: "<?php echo base_url(); ?>controllers/getDataSekolah/", //The url where the server req would we made.
                    async: false,
                    type: "POST", //The type which you want to use: GET/POST
                    data: "state="+selState, //The variables which are going.
                    dataType: "html", //Return data type (what we expect).
                    
                    //This is the function which will be called if ajax call is successful.
                    success: function(data)
                    {
                        //data is the html of the page where the request is made.
                        $('#result').html(data);
                    }
                })
            });
        });
    </script>

Code:

                  <div id="divTahunAjar">
            <?php
                    $attributes = 'class="form-control"';
                    echo form_dropdown('tahunAjar', $dropDownTahunAjar, '#', $attributes);
            ?>
           </div>

        <div id="result">
        </div>

Controllers

Code:

function getDataSekolah()
        {
            $tahunAjar_id=$_POST['state'];
            $result=$this->mainModels->getDataSekolah($tahunAjar_id);
            print "<br/>";
            foreach($result as $row)
            {
                echo "<li><a href=".base_url()."controllers/processSekolah/".$row->kd_sekolah.">".$row->nama_sekolah." >> ".$row->kota."</a></li>";
            }
        }

Model

Code:

function getDataSekolah($tahunAjar_id)
        {
            $this->db->select('*');
            $this->db->where('kd_thn_ajar', $tahunAjar_id);
            $this->db->join('kepsek','kepsek.kd_kepsek=sekolah.kd_kepsek','left');
            $this->db->join('kota','kota.kd_kota=sekolah.kd_kota','left');
            
            $query = $this->db->get('sekolah');
            return $query->result();
        }

Your onchange triggers an AJAX event, and that will change the data based on the selection made.

But your AJAX event does not modify the URL in your browsers addressbar. So when you refresh the whole page it will load the default and not the last made selection.

Update your AJAX event and add some code to the success function that will also modify the URL. How to do that can be found here:
modify-the-url-without-reloading-the-page

OR

you could set a $_SESSION variable and store the last made selection in it. When you then load for the first time or reload the whole page you check to see if it has been set. If it has been set use the value for your query.