Cascading Drop Down in Codeigniter Using AJAX

Introduction to CodeIgniter

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

1. It makes coding in PHP simple, quick and user-friendly.
   
   
2. It's an excellent framework for learning more about how PHP works as you code.
   
   
3. It follows the Model/View/Controller (MVC) approach to web development.
   
   
4. It's built on a linear, easy-to-use folder structure.
   
   
5. It's open source and simple to configure and customize for your own needs.
   
   
6. You can construct your own cleaner URI lines in CodeIgniter.

In my previous article I showed how to fetch data from a database in codeignitor and the required settings of codeignitor: Fetch Data From Database and Show in Tabular Format in 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.

 

Step 6: The Model

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

<?php
class Cities_countries_model extends CI_Model {
   public function __construct()
   {
      $this->load->database();
   }
   //fill your contry dropdown
   public function getCountries()
   {
      $this->db->select('cat_id,category');
      $this->db->from('category');
      $query = $this->db->get();
      // the query mean select cat_id,category from
      category
      foreach($query->result_array() as $row){
         $data[$row['cat_id']]=$row['category'];
      }
      // the fetching data from database is return
      return $data;
   }
   //fill your cities dropdown depending on the selected city
   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();
   }
}

Step 7: The Controller

I will create a Controller named "countries.php". 

<?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()
   {
      //starts by running the query for the countries
      dropdown
      $data['countryDrop'] = $this-
      >cities_countries_model->getCountries();
      //loads up the view with the query results
      $this->load->view('cascadeDrop', $data);
   }
   //call to fill the second dropdown with the cities
   public function buildDropCities()
   {
      //set selected country id from POST
      echo $id_country = $this->input->post('id',TRUE);
      //run the query for the cities we specified earlier
      $districtData['districtDrop']=$this-
      >cities_countries_model->getCityByCountry($id_country);
      $output = null;
      foreach ($districtData['districtDrop'] as $row)
      {
         //here we build a dropdown item line for each
         query result
         $output .= "<option value='".$row-
         >sub_name."'>".$row->sub_name."</option>";
      }
      echo $output;
   }
}

Step 8: The View 

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

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;
      charset=utf-8" />
      <title>cascade drops example</title>
         <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.
            min.js"></script>
            <script type="text/javascript"
               src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquer
               y-ui.min.js"></script>
               <script type="text/javascript">
                  $(document).ready(function() {
                     $("#countriesDrp").change(function(){
                     /*dropdown post *///
                     $.ajax({
                        url:"<?php echo
                        base_url();?>index.php/countries/buildDropCities",
                        data: {id:
                           $(this).val()},
                        type: "POST",
                        success:function(data){
                        $("#cityDrp").html(data);
                     }
                  });
               });
            });
         </script>
      </head>
   <body>
      <!--country dropdown-->
      <?php echo form_dropdown('countriesDrp',
      $countryDrop,'','class="required" id="countriesDrp"'); ?>
      <br />
      <br />
      <!--city dropdown-->
      <select name="cityDrp" id="cityDrp">
         <option value="">Select</option>
      </select>
      <br />
   </body>
</html>

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. 

Output

The output will look like this: