categories and subcategories
Posted 01 August 2012 - 07:48 AM
Posted 10 September 2012 - 09:43 AM
I tweaked the code a little and created a more dynamic and easier way to implement this instead of having to change the jQuery.
Add this to the top of the view:
//LOAD CRUD
$crud = new grocery_CRUD();
//SETUP DEPENDENT DROPDOWN
$dependent_dropdown = array(
//GET THE STATE OF THE CURRENT PAGE - E.G LIST | ADD
'state' => $crud->getState(),
//SETUP YOUR DROPDOWNS
//Parent field item always listed first in array, in this case countryID
//Child field items need to follow in order, e.g stateID then cityID
'dropdowns' => array('countryID','stateID','cityID'),
//SETUP URL POST FOR EACH CHILD
//List in order as per above
'url' => array('', site_url().'/examples/get_states/', site_url().'/examples/get_cities/')
);
Replace the Javascript at the bottom with the following:
if($dependent_dropdown['state'] == 'add' || $dependent_dropdown['state'] == 'edit')
//DONT HAVE TO EDIT THE CODE BELOW IF YOU DONT WANNA
echo '$(document).ready(function() {';
for($i = 0; $i <= sizeof($dependent_dropdown['dropdowns'])-1; $i++):
//SET VARIABLES
echo 'var '.$dependent_dropdown['dropdowns'][$i].' = $(\'select[name="'.$dependent_dropdown['dropdowns'][$i].'"]\');';
//HIDE ALL CHILD ITEMS
if($i > 0 && $dependent_dropdown['state'] == 'add') {
echo '$(\'#'.$dependent_dropdown['dropdowns'][$i].'_input_box\').hide();';
}
endfor;
for($i = 1; $i <= sizeof($dependent_dropdown['dropdowns'])-1; $i++):
//CHILD DROPDOWNS
echo $dependent_dropdown['dropdowns'][$i-1].'.change(function() {';
echo 'var select_value = this.value;';
//REMOVE ALL CURRENT OPTIONS FROM CHILD DROPDOWNS
echo $dependent_dropdown['dropdowns'][$i].'.find(\'option\').remove();';
//POST TO A CUSTOM CONTROLLER ADDING OPTIONS | JSON
echo 'var myOptions = "";';
//GET JSON REQUEST OF STATES
echo '$.getJSON(\''.$dependent_dropdown['url'][$i].'\'+select_value, function(data) {';
//APPEND RECEIVED DATA TO STATES DROP DOWN LIST
echo $dependent_dropdown['dropdowns'][$i].'.append(\'\');';
echo '$.each(data, function(key, val) {';
echo $dependent_dropdown['dropdowns'][$i].'.append(';
echo '$(\'\').val(val.value).html(val.property)';
echo ');';
echo '});';
//SHOW CHILD SELECTION FIELD
echo '$(\'#'.$dependent_dropdown['dropdowns'][$i].'_input_box\').show();';
//MAKE SURE CITY STILL HIDDEN INCASE OF COUNTRY CHANGE
for($x = $i+1; $x <= sizeof($dependent_dropdown['dropdowns'])-1; $x++):
echo '$(\'#'.$dependent_dropdown['dropdowns'][$x].'_input_box\').hide();';
endfor;
//RESET JQUERY STYLE OF DROPDOWN LIST WITH NEW DATA
echo $dependent_dropdown['dropdowns'][$i-1].'.each(function(){';
echo '$(this).trigger("liszt:updated");';
echo '});';
echo $dependent_dropdown['dropdowns'][$i].'.each(function(){';
echo '$(this).trigger("liszt:updated");';
echo '});';
echo '});';
echo '});';
endfor;
echo '});';
The code that you pasted at the top you can change to your needs.
For example say you want to load up a cars list by make and model you would use something like this:
//LOAD CRUD
$crud = new grocery_CRUD();
//SETUP DEPENDENT DROPDOWN
$dependent_dropdown = array(
//GET THE STATE OF THE CURRENT PAGE - E.G LIST | ADD
'state' => $crud->getState(),
//SETUP YOUR DROPDOWNS
'dropdowns' => array('make_id','model_id'),
//SETUP URL POST FOR EACH CHILD
//List in order as per above
'url' => array('', site_url().'/examples/get_models/')
);
I added the dynamic example into the download - example (dynamic).php
[/quote]
Hi,
Thanx for your code...
I implemented this code to in my project, its shows only text box not dropdown list????
I don't know what's the problem?????
Thanx....
Posted 16 November 2012 - 18:03 PM
Posted 19 November 2012 - 19:06 PM
Posted 09 March 2013 - 23:28 PM
Gracias por la ayuda kabadabra :)
Posted 11 March 2013 - 08:27 AM
Amazzzzzzzzzzzzzzzzzzzzzzzzzzzzing Thaaaaaaaaaaaaaaaaaaaaaaanks
Posted 17 June 2013 - 15:57 PM
Hi, is it possible to use this issue with multiselect instead of dropdown?
Posted 17 June 2013 - 19:23 PM
Wew....Very Nice.....To Share your Code....Thank's..... I feel Easy that....!!!
Posted 19 June 2013 - 11:00 AM
I Have a problem..in datatables when this view....i use a category an subcategories
that's it's original view.....
and....when i combine the your code...@KaBaDaBrA ....
I Have a problem in my view...datatables....in this picture
on this view...a total entry data is 1,080 ....it's wrong.....because in my database ..the total entry is 10 data.......
this my code.....
function anggota() { $cek = $this->session->userdata('logged_in'); $tes = $this->session->userdata('jabatan'); if(empty($cek)) { header('location:'.base_url().'login'); } else { if($tes == 'Customer Service') { try{ $data['judul'] = "Data Anggota - BMT SIDOGIRI"; $crud = new grocery_CRUD(); $crud->set_theme('datatables'); $crud->set_table('bmt_anggota'); $crud->columns('id_anggota','nama_lengkap','jenis_kelamin','alamat','tempat_lahir','no_telp','tanggal_lahir','pekerjaan'); $crud->field_type('jenis_kelamin','enum',array('Laki-Laki','Perempuan')); $crud->field_type('pekerjaan','enum',array('Pengusaha','Wiraswasta','Pegawai Negeri Sipil','Dokter','Guru Honorer','Ibu Rumah Tangga','Mahasiswa','Pelajar','Lainnya')); $crud->field_type('hub_keluarga','enum',array('Ayah Kandung','Ibu Kandung','Paman Ayah','Paman Ibu','Sepupu Ayah','Sepupu Ibu','Orang Tua Ayah','Orang Tua Ibu','Saudara Adik','Saudara Kaka','Lainnya...')); $crud->display_as('nama_lengkap','Nama') ->display_as('id_anggota','ID Anggota') ->display_as('jenis_kelamin','Jen_Kel') ->display_as('no_telp','No Telepon/HP') ->display_as('jenis_kelamin','Jenis Kelamin') ->display_as('nama_lengkap','Nama Anggota') ->display_as('alamat','Alamat Lengkap') ->display_as('alamat_relasi','Alamat Relasi Lengkap') ->display_as('no_identitas_rel','Nomor Identitas Relasi') ->display_as('ahli_waris','Nama Ahli Waris') ->display_as('negara_id','Negara') ->display_as('provinsi_id','Provinsi') ->display_as('kota_id','Kota/Kabupaten') ->display_as('id_kecamatan','Kecamatan') ->display_as('id_desa','Desa'); $crud->required_fields('id_anggota','nama_lengkap','jenis_kelamin','alamat','tempat_lahir','tanggal_lahir','no_telp','pekerjaan','no_identitas'); $crud->unset_delete(); $crud->set_subject('Anggota'); $crud->set_field_upload('photo','images/upload'); $crud->callback_field('no_telp',array($this,'callback_no_telp')); $crud->set_subject('Anggota'); $crud->set_rules('no_identitas','numeric'); $crud->set_rules('no_telp','numeric'); $crud->callback_before_insert('tanggal_lahir',array($this,'callback_tanggal_anggota')); $crud->change_field_type('tanggal_buka','invisible'); $crud->set_relation('negara_id','country','nama_negara'); $crud->set_relation('provinsi_id','state','nama_provinsi'); $crud->set_relation('kota_id','city','nama_kota'); $crud->set_relation('id_kecamatan','kecamatan','nama_kecamatan'); $crud->set_relation('id_desa','desa','nama_desa'); //IF YOU HAVE A LARGE AMOUNT OF DATA, ENABLE THE CALLBACKS BELOW - FOR EXAMPLE ONE USER HAD 36000 CITIES AND SLOWERD UP THE LOADING PROCESS. THESE CALLBACKS WILL LOAD EMPTY SELECT FIELDS THEN POPULATE THEM AFTERWARDS $crud->callback_add_field('provinsi_id', array($this, 'empty_provinsi_dropdown_select')); $crud->callback_edit_field('provinsi_id', array($this, 'empty_provinsi_dropdown_select')); $crud->callback_add_field('kota_id', array($this, 'empty_kota_dropdown_select')); $crud->callback_edit_field('kota_id', array($this, 'empty_kota_dropdown_select')); $crud->callback_add_field('id_kecamatan', array($this, 'empty_kecamatan_dropdown_select')); $crud->callback_edit_field('id_kecamatan', array($this, 'empty_kecamatan_dropdown_select')); $crud->callback_add_field('id_desa', array($this, 'empty_desa_dropdown_select')); $crud->callback_edit_field('id_desa', array($this, 'empty_desa_dropdown_select')); $crud->order_by('id_anggota','desc'); $crud->set_rules('no_identitas_rel','numeric'); $crud->unset_texteditor('alamat','full_text'); $crud->unset_texteditor('alamat_relasi','full_text'); $output = $crud->render(); //DEPENDENT DROPDOWN SETUP $dd_data = array( //GET THE STATE OF THE CURRENT PAGE - E.G LIST | ADD 'dd_state' => $crud->getState(), //SETUP YOUR DROPDOWNS //Parent field item always listed first in array, in this case countryID //Child field items need to follow in order, e.g stateID then cityID 'dd_dropdowns' => array('negara_id','provinsi_id','kota_id','id_kecamatan','id_desa'), //SETUP URL POST FOR EACH CHILD //List in order as per above 'dd_url' => array('', site_url().'/cso/get_provinsi/', site_url().'/cso/get_kota/', site_url().'/cso/get_kecamatan/',site_url().'/cso/get_desa/'), //LOADER THAT GETS DISPLAYED NEXT TO THE PARENT DROPDOWN WHILE THE CHILD LOADS 'dd_ajax_loader' => base_url().'ajax-loader.gif' ); $output->dropdown_setup = $dd_data; $this->_cs_output($output); }catch(Exception $e){ show_error($e->getMessage().' --- '.$e->getTraceAsString()); } } } } function empty_kota_dropdown_select() { //CREATE THE EMPTY SELECT STRING $empty_select = '<select name="kota_id" class="chosen-select" data-placeholder="Select Kota/Kabupaten" style="width: 300px; display: none;">'; $empty_select_closed = '</select>'; //GET THE ID OF THE LISTING USING URI $listingID = $this->uri->segment(4); //LOAD GCRUD AND GET THE STATE $crud = new grocery_CRUD(); $state = $crud->getState(); //CHECK FOR A URI VALUE AND MAKE SURE ITS ON THE EDIT STATE if(isset($listingID) && $state == "edit") { //GET THE STORED STATE ID $this->db->select('provinsi_id,kota_id') ->from('bmt_anggota') ->where('id_anggota', $listingID); $db = $this->db->get(); $row = $db->row(0); $provinsi_id = $row->provinsi_id; $kota_id = $row->kota_id; //GET THE CITIES PER STATE ID $this->db->select('*') ->from('city') ->where('provinsi_id', $provinsi_id); $db = $this->db->get(); //APPEND THE OPTION FIELDS WITH VALUES FROM THE STATES PER THE COUNTRY ID foreach($db->result() as $row): if($row->kota_id == $cityID) { $empty_select .= '<option value="'.$row->kota_id.'" selected="selected">'.$row->nama_kota.'</option>'; } else { $empty_select .= '<option value="'.$row->kota_id.'">'.$row->nama_kota.'</option>'; } endforeach; //RETURN SELECTION COMBO return $empty_select.$empty_select_closed; } else { //RETURN SELECTION COMBO return $empty_select.$empty_select_closed; } } function empty_kecamatan_dropdown_select() { //CREATE THE EMPTY SELECT STRING $empty_select = '<select name="id_kecamatan" class="chosen-select" data-placeholder="Select Kota/Kabupaten" style="width: 300px; display: none;">'; $empty_select_closed = '</select>'; //GET THE ID OF THE LISTING USING URI $listingID = $this->uri->segment(4); //LOAD GCRUD AND GET THE STATE $crud = new grocery_CRUD(); $state = $crud->getState(); //CHECK FOR A URI VALUE AND MAKE SURE ITS ON THE EDIT STATE if(isset($listingID) && $state == "edit") { //GET THE STORED STATE ID $this->db->select('kota_id,id_kecamatan') ->from('bmt_anggota') ->where('id_anggota', $listingID); $db = $this->db->get(); $row = $db->row(0); $kecamatan = $row->id_kecamatan; $kota_id = $row->kota_id; //GET THE CITIES PER STATE ID $this->db->select('*') ->from('kecamatan') ->where('kota_id', $kota_id); $db = $this->db->get(); //APPEND THE OPTION FIELDS WITH VALUES FROM THE STATES PER THE COUNTRY ID foreach($db->result() as $row): if($row->id_kecamatan == $kota_id) { $empty_select .= '<option value="'.$row->id_kecamatan.'" selected="selected">'.$row->nama_kecamatan.'</option>'; } else { $empty_select .= '<option value="'.$row->id_kecamatan.'">'.$row->nama_kecamatan.'</option>'; } endforeach; //RETURN SELECTION COMBO return $empty_select.$empty_select_closed; } else { //RETURN SELECTION COMBO return $empty_select.$empty_select_closed; } } function empty_desa_dropdown_select() { //CREATE THE EMPTY SELECT STRING $empty_select = '<select name="id_desa" class="chosen-select" data-placeholder="Select Kota/Kabupaten" style="width: 300px; display: none;">'; $empty_select_closed = '</select>'; //GET THE ID OF THE LISTING USING URI $listingID = $this->uri->segment(4); //LOAD GCRUD AND GET THE STATE $crud = new grocery_CRUD(); $state = $crud->getState(); //CHECK FOR A URI VALUE AND MAKE SURE ITS ON THE EDIT STATE if(isset($listingID) && $state == "edit") { //GET THE STORED STATE ID $this->db->select('id_desa,id_kecamatan') ->from('bmt_anggota') ->where('id_anggota', $listingID); $db = $this->db->get(); $row = $db->row(0); $kecamatan = $row->id_kecamatan; $desa = $row->id_desa; //GET THE CITIES PER STATE ID $this->db->select('*') ->from('desa') ->where('id_kecamatan', $kecamatan); $db = $this->db->get(); //APPEND THE OPTION FIELDS WITH VALUES FROM THE STATES PER THE COUNTRY ID foreach($db->result() as $row): if($row->id_desa == $desa) { $empty_select .= '<option value="'.$row->id_desa.'" selected="selected">'.$row->nama_desa.'</option>'; } else { $empty_select .= '<option value="'.$row->id_desa.'">'.$row->nama_desa.'</option>'; } endforeach; //RETURN SELECTION COMBO return $empty_select.$empty_select_closed; } else { //RETURN SELECTION COMBO return $empty_select.$empty_select_closed; } } function get_kota() { $stateID = $this->uri->segment(3); $this->db->select("*") ->from('city') ->where('provinsi_id', $stateID); $db = $this->db->get(); $array = array(); foreach($db->result() as $row): $array[] = array("value" => $row->kota_id, "property" => $row->nama_kota); endforeach; echo json_encode($array); exit; } function get_kecamatan() { $kota = $this->uri->segment(3); $this->db->select("*") ->from('kecamatan') ->where('kota_id', $kota); $db = $this->db->get(); $array = array(); foreach($db->result() as $row): $array[] = array("value" => $row->id_kecamatan, "property" => $row->nama_kecamatan); endforeach; echo json_encode($array); exit; } function get_desa() { $kecamatan = $this->uri->segment(3); $this->db->select("*") ->from('desa') ->where('id_kecamatan', $kecamatan); $db = $this->db->get(); $array = array(); foreach($db->result() as $row): $array[] = array("value" => $row->id_desa, "property" => $row->nama_desa); endforeach; echo json_encode($array); exit; } function get_provinsi() { $countryID = $this->uri->segment(3); $this->db->select("*") ->from('state') ->where('negara_id', $countryID); $db = $this->db->get(); $array = array(); foreach($db->result() as $row): $array[] = array("value" => $row->provinsi_id, "property" => $row->nama_provinsi); endforeach; echo json_encode($array); exit; } function empty_provinsi_dropdown_select() { //CREATE THE EMPTY SELECT STRING $empty_select = '<select name="provinsi_id" class="chosen-select" data-placeholder="Select State/Provinsi" style="width: 300px; display: none;">'; $empty_select_closed = '</select>'; //GET THE ID OF THE LISTING USING URI $listingID = $this->uri->segment(4); //LOAD GCRUD AND GET THE STATE $crud = new grocery_CRUD(); $state = $crud->getState(); //CHECK FOR A URI VALUE AND MAKE SURE ITS ON THE EDIT STATE if(isset($listingID) && $state == "edit") { //GET THE STORED STATE ID $this->db->select('negara_id, provinsi_id') ->from('bmt_anggota') ->where('id_anggota', $listingID); $db = $this->db->get(); $row = $db->row(0); $negara = $row->negara_id; $provinsi = $row->provinsi_id; //GET THE STATES PER COUNTRY ID $this->db->select('*') ->from('state') ->where('negara_id', $negara); $db = $this->db->get(); //APPEND THE OPTION FIELDS WITH VALUES FROM THE STATES PER THE COUNTRY ID foreach($db->result() as $row): if($row->provinsi_id == $provinsi) { $empty_select .= '<option value="'.$row->provinsi_id.'" selected="selected">'.$row->nama_provinsi.'</option>'; } else { $empty_select .= '<option value="'.$row->provinsi_id.'">'.$row->nama_provinsi.'</option>'; } endforeach; //RETURN SELECTION COMBO return $empty_select.$empty_select_closed; } else { //RETURN SELECTION COMBO return $empty_select.$empty_select_closed; } }
views/dependent_dropdown.php
<?php if(isset($dd_state) && ($dd_state == 'add' || $dd_state == 'edit')) { //DONT HAVE TO EDIT THE CODE BELOW IF YOU DONT WANNA :P echo '<script type="text/javascript">'; echo '$(document).ready(function() {'; for($i = 0; $i <= sizeof($dd_dropdowns)-1; $i++): //SET VARIABLES echo 'var '.$dd_dropdowns[$i].' = $(\'select[name="'.$dd_dropdowns[$i].'"]\');'; //SET LOADING IMAGES if($i != sizeof($dd_dropdowns)-1) { echo '$(\'#'.$dd_dropdowns[$i].'_input_box\').append(\'<img src="'.$dd_ajax_loader.'" border="0" id="'.$dd_dropdowns[$i].'_ajax_loader" class="dd_ajax_loader" style="display: none;">\');'; } if($i > 0 && $dd_state == 'add') { //HIDE ALL CHILD ITEMS echo '$(\'#'.$dd_dropdowns[$i].'_input_box\').hide();'; //REMOVE CHILD OPTIONS echo $dd_dropdowns[$i].'.children().remove().end();'; } endfor; for($i = 1; $i <= sizeof($dd_dropdowns)-1; $i++): //CHILD DROPDOWNS echo $dd_dropdowns[$i-1].'.change(function() {'; echo 'var select_value = this.value;'; //SHOW LOADING IMAGE echo '$(\'#'.$dd_dropdowns[$i-1].'_ajax_loader\').show();'; //REMOVE ALL CURRENT OPTIONS FROM CHILD DROPDOWNS echo $dd_dropdowns[$i].'.find(\'option\').remove();'; //POST TO A CUSTOM CONTROLLER ADDING OPTIONS | JSON echo 'var myOptions = "";'; //GET JSON REQUEST OF STATES echo '$.getJSON(\''.$dd_url[$i].'\'+select_value, function(data) {'; //APPEND RECEIVED DATA TO STATES DROP DOWN LIST echo $dd_dropdowns[$i].'.append(\'<option value=""></option>\');'; echo '$.each(data, function(key, val) {'; echo $dd_dropdowns[$i].'.append('; echo '$(\'<option></option>\').val(val.value).html(val.property)'; echo ');'; echo '});'; //SHOW CHILD SELECTION FIELD echo '$(\'#'.$dd_dropdowns[$i].'_input_box\').show();'; //MAKE SURE CITY STILL HIDDEN INCASE OF COUNTRY CHANGE for($x = $i+1; $x <= sizeof($dd_dropdowns)-1; $x++): echo '$(\'#'.$dd_dropdowns[$x].'_input_box\').hide();'; endfor; //RESET JQUERY STYLE OF DROPDOWN LIST WITH NEW DATA echo $dd_dropdowns[$i-1].'.each(function(){'; echo '$(this).trigger("liszt:updated");'; echo '});'; echo $dd_dropdowns[$i].'.each(function(){'; echo '$(this).trigger("liszt:updated");'; echo '});'; //HIDE LOADING IMAGE echo '$(\'#'.$dd_dropdowns[$i-1].'_ajax_loader\').hide();'; echo '});'; echo '});'; endfor; echo '});'; echo '</script>'; } ?>
Please give me a solution.... :D ??
Posted 26 June 2013 - 03:14 AM
I added in a loader image that displays next to the drop down as the child drop down loads.
Example here: http://demo.edynamics.co.za/grocery_crud/index.php/examples/customers_management/add
I also added it to the dynamic view example located in the downloaded file :)
Hi, how if the value is not ID? maybe title or another field on table with varchar value? because i will concat the value of field and i will save to another field.
Example :
I will concat Country_title, State_title, City_title to Address field. And the result value of Address filed : United States, California, City title from concat.
Thanks, Best Regards
Irfan Tanjung
Posted 28 December 2015 - 16:35 PM
Hello,
Looking the example (http://demo.edynamics.co.za/grocery_crud/index.php/examples/customers_management/add) and the code:
function empty_state_dropdown_select() { //CREATE THE EMPTY SELECT STRING $empty_select = '<select name="stateID" class="chosen-select" data-placeholder="Select State/Province" style="width: 300px; display: none;">'; $empty_select_closed = '</select>'; //GET THE ID OF THE LISTING USING URI $listingID = $this->uri->segment(4); ... }
There is something I don't understand.
What is $listingID = $this->uri->segment(4)?
I don't understand what it is and why does it is necesary for?
Thank you.
Posted 11 January 2016 - 14:36 PM
Posted 16 September 2016 - 12:38 PM
I could really use this on a project that I am working on. Can you please re-post the tutorial on github or something. Your link has went down.
Thanks!