How To Use Ajax with jQuery and CodeIgniter Tutorial?
You can easily use ajax with jQuery and Codeigniter. Below is the tutorial with complete source code on how to use ajax with jQuery and Codeigniter.
Controller : ajax_sample.php
Source: https://github.com/alyssonajackson/sample_ajax_with_jquery_and_codeigniter
Controller : ajax_sample.php
<?php
class Ajax_sample extends CI_Controller {
function __construct(){
parent::__construct();
$this->load->helper('url');
}
/*
* show list as a table, get data from "test_model"
* */
function get_list_view(){
$this->load->model('test_model');
$data = array();
$data['title'] = 'Lorem ipsum';
$data['list'] = $this->test_model->get_data();
$this->load->view('sample_table', $data);
}
function index(){
$this->load->view('test_page');
}
}
Model : test_model.php
<?php
//file: application/models/test_model.php
class Test_model extends CI_Model {
function __construct(){
parent::__construct();
}
function get_data(){
$type = $this->input->post('type');
if($type != 1){
return array();
}
return array(
array(
'name' => 'Abigail',
'email' => 'ut.sem.Nulla@duinecurna.org',
'registered_date' => '01/17/2014'
),
array(
'name' => 'Ralph',
'email' => 'ultrices.posuere@Sed.org',
'registered_date' => '10/08/2013'
),
);
}
}
Views: test_page.php
<html>
<head>
<title>Ajax sample (with CodeIgniter)</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var controller = 'ajax_sample';
var base_url = '<?php echo site_url(); //you have to load the "url_helper" to use this function ?>';
function load_data_ajax(type){
$.ajax({
'url' : base_url + '/' + controller + '/get_list_view',
'type' : 'POST', //the way you want to send data to your URL
'data' : {'type' : type},
'success' : function(data){ //probably this request will return anything, it'll be put in var "data"
var container = $('#container'); //jquery selector (get element by id)
if(data){
container.html(data);
}
}
});
}
</script>
</head>
<body>
<button onclick="load_data_ajax(1)">Load list (type 1)</button>
<button onclick="load_data_ajax(2)">Load list (type 2)</button>
<hr />
<div id="container">
</div>
</body>
</html>
Views: sample_table.php
<?php if(isset($title) && !empty($title)) : ?>
<h1><?php echo $title; ?></h1>
<?php endif; ?>
<?php if(isset($list) && count($list)) : ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Registered date</th>
</tr>
</thead>
<tbody>
<?php foreach($list as $row) : ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $row['registered_date']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else : ?>
<h3>No results found!</h3>
<?php endif; ?>
Source: https://github.com/alyssonajackson/sample_ajax_with_jquery_and_codeigniter
Comments
Post a Comment