Difference between revisions of "6CS028 Workshop - Ajax"

From mi-linux
Jump to navigationJump to search
Line 86: Line 86:
 
   }
 
   }
 
}
 
}
 +
</pre>
 +
 +
The view:
 +
 +
<pre>
 +
<!-- 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>
 
</pre>
 
</pre>

Revision as of 11:47, 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

// 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

<?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: 

<!-- 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>
Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=6CS028_Workshop_-_Ajax&oldid=7873"