Automatic dropdown box loading using codeigniter and Jquery/Ajax
Step1:Open the database.php inside the config folder and make changes like as below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$active_group = 'default'; $active_record = TRUE; $db['default']['hostname'] = 'localhost'; $db['default']['username'] = 'root'; $db['default']['password'] = ''; $db['default']['database'] = 'testlogin'; $db['default']['dbdriver'] = 'mysql'; $db['default']['dbprefix'] = ''; $db['default']['pconnect'] = TRUE; $db['default']['db_debug'] = TRUE; $db['default']['cache_on'] = FALSE; $db['default']['cachedir'] = ''; $db['default']['char_set'] = 'utf8'; $db['default']['dbcollat'] = 'utf8_general_ci'; $db['default']['swap_pre'] = ''; $db['default']['autoinit'] = TRUE; $db['default']['stricton'] = FALSE; |
step2:create a table inside testlogin database and insert the values please see the query below. —————————————————————
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
CREATE TABLE IF NOT EXISTS `country_state` ( `country` varchar(250) NOT NULL, `state` varchar(250) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `country_state` -- INSERT INTO `country_state` (`country`, `state`) VALUES ('india', 'kerala'), ('india', 'karnataka'), ('USA', 'Texas'), ('USA', 'Newyork'), ('UAE', 'Abhudhabi'), ('UAE', 'Dubai'); |
————————————————————– step3:Create a model file inside application/model/countrystate.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php class Countrystate extends CI_Model { function loadcountries() { $query = $this->db->query("SELECT DISTINCT country FROM country_state"); if ($query->num_rows > 0) { return $query->result(); } } function loadstatesfromcountries($country) { $query = $this->db->query("SELECT state FROM country_state WHERE country = '{$country}'"); if ($query->num_rows > 0) { return $query->result(); } } } ?> |
step4: create controllers inside the controllers folder-application/controllers/countrystate_disp.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php class Countrystate_disp extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('countrystate','',TRUE); } function index() { $arrCountries = $this->countrystate->loadcountries(); foreach ($arrCountries as $countries) { $arrcountries[$countries->country] = $countries->country; } $data['country'] = $arrcountries; $this->load->view('loadcountrystate',$data); } function ajax_call() { if (isset($_POST) && isset($_POST['country'])) { $country = $_POST['country']; $arrStates = $this->countrystate->loadstatesfromcountries($country); foreach ($arrStates as $states) { $arrstates[$states->state] = $states->state; } print form_dropdown('state',$arrstates); } else { redirect('site'); } } } ?> |
step5:create view file inside the application/view/loadcountrystate.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?php $this->load->helper('html'); ?> <html> <head> <title>state loading based on country using jquery and codeigniter</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#countrycombox select').change(function () { var selCountry = $(this).val(); console.log(selCountry); $.ajax({ url: "countrystate_disp/ajax_call", async: false, type: "POST", data: "country="+selCountry, dataType: "html", success: function(data) { $('#state').html(data); } }) }); }); </script> </head> <body> <div id="mydoubts"> <div id="countrycombox"><?php print form_dropdown('country',$country); ?></div> <div id="state"></div> </div> </body> </html> |
Click… Read More »