Simple ajax drop down filtering with CodeIgniter

Rather than using pure php, when it comes to a framework, working with ajax become much tricky. Since codeigniter using inbuilt MVC architecture, we have to consider the routing pattern of the application as well.

Suppose we want to filter city names according to the selected country name. Here is how we gonna do it.

Create two tables in the database. Countries and Cities.

Countries -> 2 fields (id, country_name) ; Cities ->  3 fields(id,city_name,country_id);

Create the User controller as follows.


<?php
class User extends CI_Controller {

public function __construct() {
 parent::__construct();
 $this -> load -> model('country_model');

}
 function Register() {
 $data['countries'] = $this -> country_model -> get_countries();
 $this -> load -> view('test/post_view', $data);
 }

 function get_cities($country){
 $this->load->model('city_model');
 header('Content-Type: application/x-json; charset=utf-8');
 echo(json_encode($this->city_model->get_cities($country)));
}

}

Add models.

city_model.php


<?php
class City_model extends CI_Model {

public function __construct() {
 $this -> load -> database();

}

function get_cities($country = null){
 $this->db->select('id, city_name');

 if($country != NULL){
 $this->db->where('country_id', $country);
 }

 $query = $this->db->get('cities');

 $cities = array();

 if($query->result()){
 foreach ($query->result() as $city) {
 $cities[$city->id] = $city->city_name;
 }
 return $cities;
 }else{
 return FALSE;
 }
}

}
?>

country_model.php


<?php
class Country_model extends CI_Model {

public function __construct() {
 $this -> load -> database();

}

function get_countries() {
 $this -> db -> select('id, country_name');
 $query = $this -> db -> get('countries');

$countries = array();

if ($query -> result()) {
 foreach ($query->result() as $country) {
 $countries[$country -> id] = $country -> country_name;
 }
 return $countries;
 } else {
 return FALSE;
 }
 }

}
?>

Then create the view.


<html>

 <head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">// <![CDATA[
 $(document).ready(function(){
 $('#country').change(function(){ //any select change on the dropdown with id country trigger this code
 $("#cities > option").remove(); //first of all clear select items
 var country_id = $('#country').val(); // here we are taking country id of the selected one.
 $.ajax({
 type: "POST",
 url: "http://localhost/test/user/get_cities/"+country_id, //here we are calling our user controller and get_cities method with the country_id

 success: function(cities) //we're calling the response json array 'cities'
 {
 $.each(cities,function(id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
 {
 var opt = $('<option />'); // here we're creating a new select option with for each city
 opt.val(id);
 opt.text(city);
 $('#cities').append(opt); //here we will append these new select options to a dropdown with the id 'cities'
 });
 }

 });

 });
 });
 // ]]>
</script>
 </head>
<body>
<?php $countries['#'] = 'Please Select'; ?>

<label for="country">Country: </label><?php echo form_dropdown('country_id', $countries, '#', 'id="country"'); ?><br />
 <?php $cities['#'] = 'Please Select'; ?>
<label for="city">City: </label><?php echo form_dropdown('city_id', $cities, '#', 'id="cities"'); ?><br />
</body>
</html>

Now when you choose the country, the relevant cities are automatically filtered.

Like bellow.

country : India

City : Mumbai, Kolkatta

when you select country as Sri Lanka,

City : Colombo, Matara

Advertisements

24 thoughts on “Simple ajax drop down filtering with CodeIgniter

  1. hey nice tutorial ,,but facing some trouble ,,,I am getting the values in first dropdown but no effect is occuring on 2nd dropdown,,,,, please cousel me where I am wrong?

  2. After checking out a few of the blog articles
    on your blog, I seriously like your way of blogging.

    I bookmarked it to my bookmark website list
    and will be checking back in the near future.

    Please visit my web site as well and tell me your
    opinion.

  3. In the above database tables you used ID both the tables is that id values are identical in both tables and to my surprise I find a country_id field in cities table but not in countries table and Finally, when i tried the above code I’m getting empty country and cities. Hope this will helpful to me

  4. Suresh Mallarapu :
    In the above database tables you used ID both the tables is that id values are identical in both tables and to my surprise I find a country_id field in cities table but not in countries table and Finally, when i tried the above code I’m getting empty country and cities. Hope this will helpful to me

    Suresh Mallarapu :
    In the above database tables you used ID both the tables is that id values are identical in both tables and to my surprise I find a country_id field in cities table but not in countries table and Finally, when i tried the above code I’m getting empty country and cities. Hope this will helpful to me

    Suresh Mallarapu :
    In the above database tables you used ID both the tables is that id values are identical in both tables and to my surprise I find a country_id field in cities table but not in countries table and Finally, when i tried the above code I’m getting empty country and cities. Hope this will helpful to me

  5. I tried copy everything and created the db with the same description as above mentioned. Unfortunately the code above is not working. I did not get the city name when I changed the country.

  6. excellent job! code works very well.but i have one issue. after dropdown how to display all data in table.after filter how to change data.
    i have one car table.table fields are carname, manufacture,city,fueltype, transmission .so how i can display filter data.

  7. Hi,

    for which line or char is set CDATA in the JS script ?

    Is it for the line var opt = $(”); ?

    Why tag and not tag ?
    Where is the opening tag ?

    I do not understand :

    var opt = $(”);
    opt.val(id_course);
    opt.text(lieu_depart);

    Thanks, Nils.

  8. An other time with CDATA as tags has been removed (just a try).

    <![CDATA[
    Hi,

    for which line or char is set CDATA in the JS script ?

    Is it for the line var opt = $('’); ?

    Why tag and not tag ?
    Where is the opening tag ?

    I do not understand :

    var opt = $(”);
    opt.val(id_course);
    opt.text(lieu_depart);

    Thanks, Nils.
    ]]>

    Please remove this post if no change (tags removed as well).

  9. thanks alot this code it is very good
    but there are something i hope to make if i select country and this country has no city i hope to put message like no city rather than empty

  10. thanks alot it is very good code but i hope to make when i select country and this country has no city put message like no city

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s