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:
Ajax search
<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>
<input type="search" id="mysearch" placeholder="Search">
<input type="button" id="searchbutton" value="Search" onClick="doSearch();">
Some pointers:
- First, note that the search button calls a function doSearch() when clicked.
- The function doSearch
Improvments:
- The doSearch function is included in the file for clarity's sake, but should really be in an external .js file (see notes for week 2)
- You should try using the base_url() helper instead of hard-coding your full URL.
