AJAX with CodeIgniter
AJAX can be seen almost everywhere on the web. Yahoo uses it. Google uses it. My boss uses it. My grandmother uses it — well maybe not but that shouldn't stop you from using it.
Here's an awesome tutorial to use AJAX with CodeIgniter.
This tutorial assumes that you have a form set-up like so:
<?php echo form_open(current_url(), array('id' => 'registration_form'));?>
<label for="username">Username: </label>
<input type="text" class="span-2" value="" name="username" id="username" /><br />
<label for="first_name">First Name: </label>
<input type="text" value="" name="first_name" id="first_name" /><br />
<label for="last_name">Last Name: </label>
<input type="text" value="" name="last_name" id="last_name" /><br />
<label for="desc">Password: </label>
<input type="password" value="" name="password" id="password" /><br />
<label for="desc">Repeat Password: </label>
<input type="password" value="" name="passconf" id="passconf" /><br />
<label for="desc">Email: </label>
<input type="text" value="" name="email" id="email" /><br />
<label for="register"> </label>
<input type="submit" value="Register" name="register" id="register" class="update" />
</form>
The form starts with the usual form helper, form_open(). The rest is pretty much normal.
Now with the Javascript. In this tutorial, we will use jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Now we do AJAX
Javascript
<script type="text/javascript">
$(document).ready(function() {
$('#registration_form').submit(function(){
$.post("<?php echo site_url(current_url());?>", {
username: $('#username').val(),
first_name: $('#first_name').val(),
last_name: $('#last_name').val(),
password: $('#password').val(),
passconf: $('#passconf').val(),
email: $('#email').val(),
},
function(data){
alert(data);
}
);
return false;
});
});
</script>
Explanation
$.post("<?php echo site_url(current_url());?>", {
The fourth line of the previous code will request to the current url. This means that if you are on '/this/page/', it will request to '/this/page/'.
username: $('#username').val(),
first_name: $('#first_name').val(),
last_name: $('#last_name').val(),
password: $('#password').val(),
passconf: $('#passconf').val(),
email: $('#email').val()
The above will be the information we will post. For example, username: $('#username').val() will pass the value of the element with the id, username. In our case, that would be one of the inputs.
function(data){
alert(data);
}
The above is the callback. From here we accept the response from our request. In our case, we alert the response.
CodeIgniter
function ajax_with_codeigniter()
{
$this->load->library('form_validation');
$this->load->helper(array('ajax', 'form'));
$this->form_validation->set_rules('username', 'Username', 'callback_username_check');
$this->form_validation->set_rules('first_name', 'First Name', 'required');
$this->form_validation->set_rules('last_name', 'Last Name', 'required');
$this->form_validation->set_rules('password', 'Password', 'required|matches[passconf]');
$this->form_validation->set_rules('passconf', 'Password Confirmation', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
if ($_POST)
{
if (is_ajax() AND $this->form_validation->run() === TRUE)
{
echo "Registration Successful";
}
else
{
echo validation_errors(' ',' ');
}
}
else
{
$this->load->view('code/ajax_with_codeigniter/ajax_with_codeigniter');
}
}
Explanation
$this->load->library('form_validation');
$this->load->helper(array('ajax','form'));
The above code will load the library ajax helper, the form helper and the form validation library.
$this->form_validation->set_rules('username', 'Username', 'callback_username_check');
$this->form_validation->set_rules('first_name', 'First Name', 'required');
$this->form_validation->set_rules('last_name', 'Last Name', 'required');
$this->form_validation->set_rules('password', 'Password', 'required|matches[passconf]');
$this->form_validation->set_rules('passconf', 'Password Confirmation', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
The above code is how we set rules. Pretty normal if you have used CodeIgniter in the past.
if ($_POST)
{
if (is_ajax() AND $this->form_validation->run() === TRUE)
{
echo "Registration Successful";
}
else
{
echo validation_errors(' ', ' ');
}
}
else
{
$this->load->view('code/ajax_with_codeigniter/ajax_with_codeigniter');
}
The last piece of code checks for anything POSTed. Remember that we are requesting to the same method so we should check for anything POSTed before we output anything. This conditional statement is only used because of the situation. You normally won't have this checkpoint.
There's something POSTed
When we know that there was something POSTed, we check if the request was done via the ajax_helper. This is just some check if we only want AJAX requests. The second part of the condition is if the data passed passes the validation rules we set up. If it checks out fine, we send our message, "Registration successful". If not, we send the errors.
Nothing was POSTed
When we know that nothing was POSTed, we load the view. This pretty much activates when we just loaded the page.
Demo
You can visit our AJAX with CodeIgniter demo.
Categories: How To, Web Development
Tags: codeigniter, php, javascript, jquery
5 Comments
Sunny Maharjan
hello, i don’t know about the previous commentor, but, i can’t seem to find, ajax_helper.php anywhere and even after downloading Ajax.php into the libraries folder, i can’t find is_ajax() function anywhere? can you help me?
November 22nd 2009
Thorpe Obazee
@ Sunny Maharjan. The Ajax helper can be found at this post, Ajax Helper
Sorry for not adding the link earlier.
November 23rd 2009
Haqqi
Wow, it’s a great article with detailed explanation. I will wait for another tutorial.
February 26th 2010
joe
Thanks a lot for this. this was very helpful.
February 7th 2010
Yin
Thanks for putting up this tutorial. It helped me a lot.
November 15th 2009