|
|
| Line 1: |
Line 1: |
| | [[Main Page]] >> [[6CC001|Advanced Web Technologies]] >> [[6CC001 - Workbook|Workbook]] >> Week 06 | | [[Main Page]] >> [[6CC001|Advanced Web Technologies]] >> [[6CC001 - Workbook|Workbook]] >> Week 06 |
| | | | |
| − | Today we are going to use Ajax to create a simple Live Search. There are 3 simple steps: | + | Today we are going to use Ajax to create a simple jQuery Live Search in Code Igniter: |
| | | | |
| − | * Step 1 – Create the web page | + | * Step 1 – Create the data controller/view |
| − | * Step 2 – Create the client-side script (JavaScript) | + | * Step 2 – Create the web page controller/view |
| − | * Step 3 – Create the server-side script (PHP)
| |
| | | | |
| − | == Prototype JavaScript Framework == | + | == Step 1 – Create the data controller/view == |
| | | | |
| − | Let’s use the [http://www.prototypejs.org/ Prototype JavaScript Framework] so we don't have to type too much JavaScript code :)
| + | == Step 2 – Create the web page controller/view == |
| − | * Download the [http://www.prototypejs.org/ Prototype JavaScript Framework]
| |
| − | * Upload it to your mi-linux account (in the same folder as your web pages)
| |
| − | * Don't forget to set its permissions to "readable" by all.
| |
| − | | |
| − | == Step 1 – Create the web page == | |
| − | | |
| − | First we obviously need to create our web page. Let’s keep it nice and simple:
| |
| − | | |
| − | <pre>
| |
| − | <HTML>
| |
| − | <HEAD>
| |
| − | <TITLE>Test Ajax</TITLE>
| |
| − | <SCRIPT type="text/javascript" src="prototype.js"></SCRIPT>
| |
| − | <SCRIPT type="text/javascript" src="ajax.js"></SCRIPT>
| |
| − | </HEAD>
| |
| − | <BODY>
| |
| − | <INPUT type="text" id="a_name">
| |
| − | <INPUT type="button" value="Check name" onclick="send_request();">
| |
| − | <DIV id="div_result"></DIV>
| |
| − | </BODY>
| |
| − | </HTML>
| |
| − | </pre>
| |
| − | | |
| − | In our head section:
| |
| − | * A link to your local copy of the Prototype JavaScript Framework (see previous section)
| |
| − | * A link to your Ajax JavaScript code (see next section)
| |
| − | | |
| − | On the page itself:
| |
| − | * A simple text box
| |
| − | * A button that will trigger the Ajax code (located in the file below)
| |
| − | * A "div_result" element, in which the Ajax response will be displayed
| |
| − | | |
| − | == Step 2 – Create the client-side script (JavaScript) ==
| |
| − | | |
| − | This file implements the client-side part of our Ajax transaction:
| |
| − | * It reads the name typed in the text box
| |
| − | * Checks that it is not blank
| |
| − | * Creates an Ajax object (this will only work if you have downloaded the Prototype library)
| |
| − | * Creates a Request, passing in our "Name" parameter, and defining what should happen when the response comes back:
| |
| − | | |
| − | <pre>
| |
| − | // ajax.js
| |
| − | | |
| − | function send_request()
| |
| − | {
| |
| − | // Get user input
| |
| − | name = document.getElementById("a_name").value;
| |
| − |
| |
| − | // Check if name was provided
| |
| − | if(name!="")
| |
| − | {
| |
| − | // Create and execute Ajax request
| |
| − | new Ajax.Request('ajax.php',
| |
| − | {
| |
| − | method:'get',
| |
| − | parameters: {name: name},
| |
| − |
| |
| − | // What should happen when the response comes back
| |
| − | onSuccess: function(transport){
| |
| − | var response = transport.responseText || "no response text";
| |
| − | document.getElementById("div_result").innerHTML = response;
| |
| − | },
| |
| − |
| |
| − | // What should happen if the request fails
| |
| − | onFailure: function(){ alert('Something went wrong...') }
| |
| − | });
| |
| − | | |
| − | }
| |
| − | else
| |
| − | {
| |
| − | var sh = document.getElementById("div_result");
| |
| − | sh.innerHTML = "Please enter value";
| |
| − | }
| |
| − | }
| |
| − | </pre>
| |
| − | | |
| − | == Step 3 – Create the server-side script (PHP) ==
| |
| − | | |
| − | Now all we need is the server-side part of our Ajax transaction. It’s a simple PHP file that reads the parameters passed in the URL, and then queries the database. I will let you implement the database access… this example features a “fake” database check (a simple if statement).
| |
| − | | |
| − | <pre>
| |
| − | <?
| |
| − | // ajax.php
| |
| − | | |
| − | // Get value coming from request
| |
| − | $name = $_GET['name'];
| |
| − | | |
| − | // Connect to DB
| |
| − |
| |
| − | // Check if name exists in table
| |
| − |
| |
| − | if($name=="Alix")
| |
| − | echo("This name is in the database");
| |
| − | else
| |
| − | echo("This name is NOT in the database :(");
| |
| − |
| |
| − | //Close connection
| |
| − | | |
| − | ?>
| |
| − | </pre>
| |
| − | | |
| − | == All done ==
| |
| − | | |
| − | Your live search should now work… Here is a [http://mi-linux.wlv.ac.uk/~in9352/ajax/page.html working example] on my account.
| |
