Amitav Roy

Blog on web and travel

Codeigniter jQuery and Ajax

Posted on 22 Jan 2012 by Amitav Roy

Codeigniter jQuery and Ajax

In this tutorial, I will show you how to use the jQuery and Ajax inside the Code Igniter framework. We will create a page where we will create a drop down of states coming from the database. And once a state is selected, the list of cities will come through Ajax.

To set up first we will create a “Site” controller which will display a drop-down of States. Our job will be to display the list of cities based on the states. Although this should be done using a simple javascript array inside the page in normal condition because this is not a very important data to have a server call. But for sake of tutorial, this is nice ?

Here is the snapshot of the database table for the state and city:

[NOTE: Remember, if this you need to connect to database in code igniter, you need to do some configuration which is not included in this tutorial. Refer this link to check that: check the Basic Configuration to the Framework section.]

Here is my “Site” controller:

Here the first is the construct function will be executed every time the site class is initiated. [NOTE: Constructor functions are a handy way of loading models and helpers instead of every time making a call to load them.]

Inside index, we are first building the “$arrStates” in which we have saved the result from the “state_city_model” function inside the “state_city_model” and then I have changed the way I want the final array which I am padding to the view because I will be using the array to create my dropdown using the form helper of Code Igniter.

Next in the controller is the “ajax_call” which is where the server request is made through ajax when the drop down is changed. This is almost the same concept to the index method except that here I have to print the output instead of passing it to any view. Here we are using the “get_cities_from_state” function inside the “state_city_model” model passing the state as the argument so that we will get only those cities which are inside the desired state coming through the ajax call.

Here is the code for the mode “State_city_model”:

Here both the functions are almost identical except that in the second one the query has an extra where clause where I am taking the state as an argument. Remember, I have not used the Active records of Code Igniter to do this fast, but you should always use that instead of the normal queries.

And last but not the least is the “View”:

Here from line 14 is the main thing which is going on. $.ajax is the function which says that url: “site/ajax_call” is the page where the request should be made. The type will be POST and the data: is the actual data which will pass as POST variable to the page.

And then on success, a function is called which simply changes the HTML of the #city div with the new one.

That was simple. Isn’t it?

Oh, and here is the screenshot of the thing working. No CSS or beautification, but it works never the less.