CodeIgniter and Ajax Using JQuery Tutorial
I created this tutorial because I was having a hard time finding good simple CodeIgniter + JQuery tutorial for newbie like me. The one I found, created by MR Forbes, is hard to understand and apparently isn’t working. Another one, pr0digy’s, is using Mootools for the AJAX framework.
So I decided to create my own CodeIgniter and JQuery tutorial based on pr0digy’s tutorial. I’m assuming you already know how to code using CodeIgniter. If you’re new to CodeIgniter, you need to find others tutorial first. The videos given in CodeIgniter’s site is a good start.
This tutorial is about creating simple CodeIgniter + database + ajax system. User will be shown a form to post a message. Then after he/she press the submit button, the system will save the message using ajax and then show the message. You could see the result first if you want.
Database
The first thing we need to do is creating a table to save the message. For this tutorial, We will use this:
CREATE TABLE IF NOT EXISTS `messages` (
`id` tinyint(4) NOT NULL auto_increment,
`message` varchar(256) NOT NULL,
PRIMARY KEY (`id`)
)
Controller
Then, we need to create a controller. My controller is named message. You could name your controller any name you like. After that, create 2 functions/methods, view and add.
view is used to get the default view and list of messages from the database. The codes are:
function view($type = NULL)
{
// get data from database
$data['messages'] = $this->Message_model->get();
if ($type == "ajax") // load inline view for call from ajax
$this->load->view('messages_list', $data);
else // load the default view
$this->load->view('default', $data);
}
We fetch messages from the database using Message_model->get() function. Then the data is passed to the view. Here, we have 2 views called. One for the default view, where we called the page using message/view, and the other is for calling from ajax.
add is a proccess used to insert the message to the database. The codes are:
function add()
{
// if HTTP POST is sent, add the data to database
if($_POST && $_POST['message'] != NULL) {
$message['message'] = $_POST['message'];
$this->Message_model->add($message);
} else
redirect('message/view');
}
This function is accessed when we press the submit button from the form. This function will save the message using Message_model->add() function.
Model
The next thing we need to create is the model. I use Message_model for the name. Here we create two functions, add and get. add is a function to insert the data into the database. get is a function to retrieve data from database. I think the codes are pretty self-explainatory, but you could drop me a message if you need some explainations on the codes.
function add($data)
{
$this->db->insert('messages', $data);
}
function get($limit=5, $offset=0)
{
$this->db->orderby('id', 'DESC');
$this->db->limit($limit, $offset);
return $this->db->get('messages')->result();
}
View
I use 2 files for view section. default.php and message_list.php. The message_list is used for displaying the messages taken from the database.
load->view('messages_list') ?>
- message ?>
Hey, Where’s the JQuery?
Here we go. The last, and maybe the most important part of this tutorial. So, we the our controller, we had the model, and we had the views. I assume you already know how to include a jquery script to your view. The jquery codes are this:
$(document).ready(function() {
$('#submit').click(function() {
var msg = $('#message').val();
$.post("", {message: msg}, function() {
$('#content').load("");
$('#message').val('');
});
});
});
So, when we click the submit button, the javascript will take the value of input textbox then send it to message/add using post method. When the action succeed, the script will call message/view/ajax. Note the ajax keyword. It will call the message_list view instead of the default one. Then the view will replace the content in div#content tag.
Well done. You could see the demo I made from the tutorial.
You could download the whole files used in this tutorial in tutorial.zip (1.98 KB).
Or, if you prefer to get one by one,
controller: message (904 bytes)
model: message model (583 bytes)
view: default (782 bytes)
view: message_list (111 bytes)
I hope this tutorial helps newbie like me. If you have any question, just drop a comment below 
i wondering how to include the jquery.
cause i also been following MR Forbes example..
although can get the first page running. But when it load back the page again, it not running anymore.
i put my file like this :
www/codeigniter/system <– this is for all the system files.
i put my javascript jquery
www/codeigniter/javascript/jquery.js
in the view, i include like this
it can run when i type my URL like this
localhost/codeigniter/index.php/message
but not when
localhost/codeigniter/index.php/message/view
can guide me how to really put the jquery files ?
thanks !!~
have you put the javascript link in your head tag in view? yours would be like this:
ps: I sent you email with the same comment
oh well, the code is filtered. sucks.
here’s how to include your javascript:
http://kriwil.pastebin.com/d2a83eb9b
the link works.
before this i found that when the URL like:
localhost/codeigniter/index.php/message/view
when it got another / after index.php
then i have to include extra “../” to the original “../jquery.js”.
if localhost/codeigniter/index.php/message/view/
another / behind view.
then i have include “../../” to the include link.
but your reference link solve the problem.
it help lots…..
thanks lots…
glad I could help
yes, we have to use absolute url when dealing with link in CI, because CI url structure is like directory structure
for this part…
$(document).ready(function() {
$(’#submit’).click(function() {
var msg = $(’#message’).val();
$.post(”", {message: msg}, function() {
$(’#content’).load(”");
$(’#message’).val(”);
});
});
});
how could i add more element to it ?
you are using json way ?
if you want to add more element, you could see this code: http://kriwil.pastebin.com/f1bcc82a4
no, I’m not using json yet. I’m using regular jquery method. Maybe I’ll write tutorial about that later
thanks for the reply…
here is another question. i have been figure it for 2 days.
for php require_once, include…
i cant use base_url() or BASEPATH.
not sure what happen here…
i did it same way as how i do with the javascript.
can help me with that ?
thanks…
you could use the BASEPATH.
I just tried and it worked. The BASEPATH defines your CI system folder.
So if you want to include a file from view folder, you should write like this:
require_once(BASEPATH . 'application/views/test.php');
why would you want to use require_once anyway? if you want to include some function, you could create it as CI plugin. It’s more elegant in CI
i want to include files like header and footer that shared.
so in CI include is not preferred?
hmm..i think i can get your idea….
just use controller to load view of header and footer….
that might works….haha….thanks
if you want to include another view files in view folder, you could use
$this->load->view('filename');in the view file
it’s the same with inlcude file, only it’s done the CI-way
I did that in every website I created. like this:
< ?php $this->load->view('header') ?> ... some html codes < ?php $this->load->view('footer') ?>I put header.php and footer.php in my view folder
oh…yeah…if the view files is out of view folder…
then i will have bit problem to included.
so how about css? same way how the jquery file done ?
yup, if the file is not the view folder, maybe the only way is using that require_once method
yes, css is using the same way with jquery
thanks dude…you helped me alot…
no problem mate. it’s nice to help
Bro, ajarin dong CI dengan AJAX. ane masih belum ngerti padahal udah belajar dari tutorial orang banyak. buat back end program dengan AJAX dalam CI.
mo hujan no oject becceckk….
[...] CodeIgniter and AJAX using jQuery [...]
[...] klik disini [...]
[...] http://www.mrforbes.com/wordpress/2007/05/13/a-quick-code-igniter-and-jquery-ajax-tutorial/ http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/ Possibly related posts: (automatically generated)Ajax help siteRuby related [...]
very well written..Nice tutorial mate.
Thank you
[...] CodeIgniter and Ajax using jQuery Ajax unter der Verschmelzung von CodeIgniter und jQuery. [...]
could u pls give me links for another jquery+CI tutorial?thx…
Thanks!!!
nice tutorial
Hello,
I couldn’t figure out yet.
Is your code working?
I am having the same behaviour as your demo, however I can’t add more registries. Do I have to add an onClick event at the button?
If yes please tell us how.
Nice Tutorial!
Leo
hi Leo,
the code is working. the
$('#submit').click()is an onclick event wrapped using jquery library. the demo worksNot work on ie6
nice articel..i’ve implemented, and it works..thx..
but, can you writing articel about CI + ajax + thickbox or Ci + ajax + extjs..
in simple case, can you explain how to insert data to database with JQuery ajax then load modal box with thickbox, after that the data load to extjs grid
thx
healthdict.blogspot.com
You really should be more careful. You’re not validating any user input! This is dangerous! You should really take away the demo before any damage is done.
you’re right. thank you for the notification
Good tutorial, but i can’t download the files. and i can’t read the code of the view files
fixed
thanx a lot