Cascading Drop Down in Codeigniter Using AJAX – Info PHP

On Jul 25, 2018

Insert Value From CheckBox In Database (MySQL) In PHP…

Jul 25, 2018

We will be using CodeIgniter, which has been described as “a powerful PHP framework with a very small footprint”.

CodeIgniter is a PHP-driven framework, containing a grab-bag of libraries, helpers, plug-ins and other resources, that takes care of many of the more complex procedures and functions for which PHP is famous. CodeIgniter does all the heavy lifting for you while maintaining high performance. It will simplify PHP syntax, streamline the code underlying your web pages and best of all, have you churning out dynamic, interactive, professional websites in no time.

Principles of CodeIgniter

Now here I am explaining cascading dropdown in codeignitor that belong together and if I select country from the dropdown then the cities in the selected country will be automatically shown in another dropdown without post-back. Now here I am explaining cascading dropdown in codeignitor that belong together and if I select the country in the dropdown then the cities in that selected country will be automatically shown in the other dropdown without post-back.

Step 1: This is my database table that I have given the name “category”.

Step 2:

This is my cities table that I have given the name

“sub_category”.

The “cat_id” column is the foreign key column that is referenced from the “category” table’s column “cat_id”.

Step 3: Database connectivity

You must first edit the file database.php that can be found in the application/config/ folder. The important changes are:

$db[‘default’][‘hostname’] = ‘localhost’;
$db[‘default’][‘username’] = ‘root’;
$db[‘default’][‘password’] = ”;
$db[‘default’][‘database’] = ‘abc’;
$db[‘default’][‘dbdriver’] = ‘mysql’;

Step 4: Autoload the database

If your application uses the database very much then you need to change the autoload.php that can also be found inside the application/config/ folder.

$autoload[‘libraries’] = array(‘database’);

Step 5: By default, CodeIgniter has one primary config file, located at application/config/config.php.

$config[‘base_url’] = ‘http://localhost/cascading/’;

Cascading is the folder where my application is present.

In the Models we have the CRUD operations. I will create a model named “cities_countries_model.php”.

class Cities_countries_model extends CI_Model {
public function __construct()
{
$this->load->database();
}
public function getCountries()
{
$this->db->select(‘cat_id,category’);
$this->db->from(‘category’);
$query = $this->db->get();
category
foreach($query->result_array() as $row){
$data[$row[‘cat_id’]]=$row[‘category’];
}
return $data;
}
public function getCityByCountry($cat_id=string)
{
$this->db->select(‘sub_id,sub_name’);
$this->db->from(‘sub_category’);
$this->db->where(‘cat_id’,$cat_id);
$query = $this->db->get();
return $query->result();
}
}

I will create a Controller named “countries.php”.

class Countries extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->helper(‘url’);
$this->load->helper(‘form’);
$this->load->model(‘cities_countries_model’);
}
public function index()
{
dropdown
$data[‘countryDrop’] = $this–
>cities_countries_model->getCountries();
$this->load->view(‘cascadeDrop’, $data);
}
public function buildDropCities()
{
echo $id_country = $this->input->post(‘id’,TRUE);
$districtData[‘districtDrop’]=$this–
>cities_countries_model->getCityByCountry($id_country);
$output = null;
foreach ($districtData[‘districtDrop’] as $row)
{
query result
$output .= “.$row–
>sub_name.“‘>”.$row->sub_name.““;
}
echo $output;
}
}

To display the output we need a view named “cascadeDrop.php”. The code will go something like this:

“http://www.w3.org/1999/xhtml”>
“Content-Type” content=”text/html;
charset=utf-8″ />
cascade drops example
“text/javascript”
src=”http:
min.js”>
“text/javascript”
src=”http:
y-ui.min.js”>
“text/javascript”>
$(document).ready(function() {
$(“#countriesDrp”).change(function(){
$.ajax({
url:”
base_url();?>index.php/countries/buildDropCities”,
data: {id:
$(this).val()},
type: “POST”,
success:function(data){
$(“#cityDrp”).html(data);
}
});
});
});
‘countriesDrp’,
$countryDrop,”,‘class=”required” id=”countriesDrp”‘); ?>
“cityDrp” id=“cityDrp”>
“”>Select

On the beginning of the view file we have a jQuery script that will enable us to do the post, it starts with checking if all the elements are ready and loaded, next it listens to the “selected” event from the country dropdown, that is the trigger for the post.

When the event is raised a ajax “request” (let’s call it like this) is created and on it we specify all sorts of useful stuff:

URL: the destination of the request (on this example is the controller/function).
Data: the information we intend to add to the request (on this example the selected id value from the dropdown).
Type: request type (GET/POST).
Success: what happens if the request reaches it’s destination.

The output will look like this:

Article Prepared by Ollala Corp