6CS028 Workshop - Ajax
Main Page >> Advanced Web Technologies >> Workbook >> Week 06 - Ajax
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
Important: we will be using Javascript, so remember to have your error console open at all times.
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 "Search" 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:
- First, note that the search button calls a function doSearch() when clicked.
- The function doSearch() does the jQuery Ajax call. It calls the URL tested at the end of step 1, passing the value typed in the "mysearch" text box as a parameter.
- If successful, the result is simply inserted in the "searchresults" DIV.
Improvements:
- 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 (again see note for week 2)
Here is my finished page:
For more information on the jQuery Ajax method, please see documentation (the examples right at the bottom are especially useful):
