Getting Ajax data using views in CodeIgniter

Getting data through Ajax is very cool, and when we can reuse the CodeIgniter views to get the Ajax data, the overall user experience become much more enhanced. So, in this tutorial I would show you how I have used a CodeIgniter view and Ajax to filter data.

This is a tutorial where I am not going to talk about how to get the Ajax data. I am assuming that you already know how to use Ajax and have a sound knowledge about CodeIgniter. If you want, you can check the other tutorials from CodeIgniter where I have explain right from the basic how to use Ajax with CodeIgniter.

Ok, so here what I am going to do: I will use the Drupal database of my site to first load a list of all the nodes available on the site - which has images, galleries and articles. Then, I will use Ajax calls to filter out the list with content as per the clicked type: simple isn't it?

First I created an ajax_demo controller which has index and give_more_data function. The give_more_data is the page which I will call through Ajax to get the desired output. Oh by the way, if you see the line number 8 I am using a master template inside which I am calling another view 'ajax_index' which is set on line number 6 as $data['view'].

class ajax_demo extends CI_Controller {

  function index() {
    $this->load->model('nodes_m');

    $data['view'] = 'ajax_index';
    $data['node_list'] = $this->nodes_m->get_node_list();
    $this->load->view('template',$data);
  }

  function give_more_data() {
    if (isset($_POST['type'])) {
      $this->load->model('nodes_m');
      $data['ajax_req'] = TRUE;
      $data['node_list'] = $this->nodes_m->get_node_by_type($_POST['type']);
      $this->load->view('ajax_index',$data);
    }
  }
  
}

This is calling a model nodes_m which gives the query result. Again the model has two functions one for the flat list of all the nodes and the second one has a where clause to filter as per the node type.

class Nodes_m extends CI_Model {
    private $table = "node";

  function get_node_list() {
    $this->db->select('title,type');
    $this->db->order_by('created','DESC');
    $this->db->limit(30,0);
    $query = $this->db->get($this->table);

    return $query->result();
  }

  function get_node_by_type($type) {
    $this->db->select('title,type');
    $this->db->where('type',$type,'=');
    $this->db->order_by('created','DESC');
    $query = $this->db->get($this->table);

    return $query->result();
  }
}

All this is done to get the data. And now here is the view ajax_index which is being used to get the data in designed tabular format.

<?php if (!isset($ajax_req)): ?>
View only Gallery
View only Images
View only Articles
<?php endif; ?>

<div id="ajax-content-container">
  <table class="table table-bordered table-condensed table-striped">
    <tr>
      <th>Title</th>
      <th>Type</th>
    </tr>
    <?php foreach ($node_list as $key=>$value): ?>
      <tr>
        <td><?php print $value->title; ?></td>
        <td width="10%"><?php print ucfirst($value->type); ?></td>
      </tr>
    <?php endforeach; ?>
  </table>
</div>

Now, it's time to write the jQuery code to make the click function work and make the Ajax calls to populate the container div with desired content.

$(document).ready(function () {
  ajax_articles();
  ajax_images();
  ajax_gallery();
});

function ajax_articles() {
  $('.show-articles').click(function () {
    $.ajax({
      url: base_url+"index.php?/ajax_demo/give_more_data",
      async: false,
      type: "POST",
      data: "type=article",
      dataType: "html",
      success: function(data) {
        $('#ajax-content-container').html(data);
      }
    })
  });
  
}

function ajax_images() {
  $('.show-images').click(function () {
    $.ajax({
      url: base_url+"index.php?/ajax_demo/give_more_data",
      async: false,
      type: "POST",
      data: "type=image",
      dataType: "html",
      success: function(data) {
        $('#ajax-content-container').fadeIn().html(data);
      }
    })
  });
}

function ajax_gallery() {
  $('.show-gallery').click(function () {
    $.ajax({
      url: base_url+"index.php?/ajax_demo/give_more_data",
      async: false,
      type: "POST",
      data: "type=gallery",
      dataType: "html",
      success: function(data) {
        $('#ajax-content-container').html(data);
      }
    })
  });
}

So where is how the final thing looks like:

Default listing of the list of articles

Listing coming through ajax