6CS028 Workshop - Ajax
Main Page >> Advanced Web Technologies >> Workbook >> Week 06
Today we are going to use Ajax to create a simple jQuery Live Search in Code Igniter:
- Step 1 – Create the data controller/view
- Step 2 – Create the web page controller/view
Include jQuery
Please note that we will be using the jQuery library, so you need to include it in your <head> section. You can do this by adding the following <script> line to your templates/header.php file:
<html> <head> <title><?php echo $title ?> - CodeIgniter 2 Tutorial</title> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> </head> <body> <h1>CodeIgniter 2 Tutorial</h1>
Step 1 – Create the data controller/view
First we need to create the page (i.e. model + controller + view) that will return the Ajax data.
For now let's keep our controller simple:
<?php
// application/controller/ajax.php
class Ajax extends CI_Controller
{
public function getdata($param = '')
{
// Get data from db
$data['ajaxdata'] = "Search result for $param";
// Pass data to view
$this->load->view('ajax/index', $data);
}
}
As you can see we are using dummy data. You'll have to add the model part yourselves (as per News section tutorial on the Code Igniter website!
Note that we are NOT including the header and footer views, as our Ajax data will be embedded in an existing page (see later).
Our view is very simple:
<!-- application/views/ajax/index.php--> <p><?=$ajaxdata?></p>
It simply displays the data passed in by the controller.
You should now be able to browse to your ajax controller:
You can pass it a term to be searched in the URL:
Next we need to call this controller via an Ajax request from our search form (see step 2!)
Step 2 – Create the web page controller/view
The controller is very simple, it simply loads our search page:
<?php
// application/controller/search.php
class Search extends CI_Controller
{
public function form()
{
$data['title'] = 'Ajax search';
$this->load->view('templates/header', $data);
$this->load->view('search/form');
$this->load->view('templates/footer');
}
}
The view itself is more complicated:
<!-- application/views/search/form.php -->
<h2>Ajax search</h2>
<script>
// This is the jQuery Ajax call
function doSearch()
{
$.ajax({
type: "GET",
url:"http://mi-linux.wlv.ac.uk/~in9352/ci/index.php/ajax/getdata/" + $("#mysearch").val(),
success:function(result){
$("#searchresults").html(result);
}});
}
</script>
<!-- Search box -->
<input type="search" id="mysearch" placeholder="Search">
<!-- Search button -->
<input type="button" id="searchbutton" value="Search" onClick="doSearch();">
<!-- The DIV that will contain the search results -->
<div id="searchresults"></div>
Some pointers:
