Monthly Archives: October 2010

CodeIgniter and Ajax Using jQuery tutorial using JSON

This post is outdated, and might and might not work. Unfortunately I currently don’t have time to check and/or fix it. Sorry 😦

So now you have created CodeIgniter + AJAX jQuery, you’ll want to use JSON, javascript way to exchange data.

Assuming you already understand how to do CI + AJAX jQuery, using JSON should be pretty easy. We’ll only need to extend couple things. First, we’ll be extending Message::view in Message controller from that tutorial. Then we’ll extend the view to fetch/process the data.

Controller

The previous method was like this:

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);
}

Since we already handled the view type we want to return, all we have to do is add more handler for json. We’ll just convert the array of objects we get from model using json_encode function. Here’s the code:

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 if ($type == 'json') // json, print the output directly
    {
        echo json_encode($data['messages']);
    }

    else // load the default view
        $this->load->view('default', $data);
}

View

We’ll be adding a button to trigger the new “fetch json data” so the previous handling is still functional.

The previous view (default.php) was:

load->view(‘messages_list’) ?>

Then we added second submit button:

load->view(‘messages_list’) ?>

Now the javacript. The previous javascript/jquery code was:

$(document).ready(function() {
    $('#submit').click(function() {

        var msg = $('#message').val();

        $.post("", {message: msg}, function() {
            $('#content').load("");
            $('#message').val('');
        });
    });
});

Then we need to create handler to fetch the data (in json) and put it in correct html tag. Here’s the code after we added handler for second submit button:

$(document).ready(function() {
    $('#submit').click(function() {

        var msg = $('#message').val();

        $.post("", {message: msg}, function() {
            $('#content').load("");
            $('#message').val('');
        });
    });

    $('#submit2').click(function() {
        var msg = $('#message').val();
        $('#message').val('');
        $.post("", {message: msg}, function() {
            $.getJSON("", function(data) {
                var contentHtml = "
    “; $(data).each(function(index, item) { contentHtml += ”

  1. “; contentHtml += item.message; contentHtml += “
  2. “; }); contentHtml += “

";
                $('#content').html(contentHtml);
            });
        });
    });
});

It’s done. Try yourself, or download the files needed.

I know, it’s pretty basic. But I think it’s enough to get you started to use json in exchanging data. Why json instead of complete html? less data transfer.

Advertisements
Tagged , , , ,