Difference between revisions of "6CS028 Workshop - Ajax"
| Line 43: | Line 43: | ||
As you can see we are using dummy data. You'll have to add the model part yourselves (as per [http://ellislab.com/codeigniter/user-guide/tutorial/news_section.html News section tutorial] on the Code Igniter website! | As you can see we are using dummy data. You'll have to add the model part yourselves (as per [http://ellislab.com/codeigniter/user-guide/tutorial/news_section.html 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: | ||
| + | |||
| + | <pre> | ||
| + | <p><?=$ajaxdata?></p> | ||
| + | </p> | ||
| + | |||
| + | It simply displays the data passed in yb the controller. | ||
| + | |||
| + | You should now be able to browse to your ajax controller: | ||
| + | [[http://mi-linux.wlv.ac.uk/~in9352/ci/index.php/ajax/getdata/ http://mi-linux.wlv.ac.uk/~in9352/ci/index.php/ajax/getdata/]] | ||
| + | |||
| + | You can pass it a term to be searched in the URL: | ||
| + | [[http://mi-linux.wlv.ac.uk/~in9352/ci/index.php/ajax/getdata/batman http://mi-linux.wlv.ac.uk/~in9352/ci/index.php/ajax/getdata/batman]] | ||
| + | |||
== Step 2 – Create the web page controller/view == | == Step 2 – Create the web page controller/view == | ||
Revision as of 10:37, 4 March 2014
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
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:
<?=$ajaxdata?>
It simply displays the data passed in yb the controller. You should now be able to browse to your ajax controller: [http://mi-linux.wlv.ac.uk/~in9352/ci/index.php/ajax/getdata/] You can pass it a term to be searched in the URL: [http://mi-linux.wlv.ac.uk/~in9352/ci/index.php/ajax/getdata/batman]Step 2 – Create the web page controller/view
