Home arrow AJAX & Prototype arrow Page 2 - Using Prototip with AJAX

Adding Some PHP - AJAX

In the first part of this tutorial we looked at the ease with which a default implementation of Prototip tooltips could be put on the page, and how, with just a little configuration we could change the appearance and behavior of the tooltips. In this part of the tutorial were going to take a look at the built-in AJAX functionality boasted by the plugin, and see how we can extend the tooltips by supplying HTML elements instead of plain text as their content.

  1. Using Prototip with AJAX
  2. Adding Some PHP
  3. Extending the Tooltips with Additional Mark-up
  4. Getting the Rules Right
By: Dan Wellman
Rating: starstarstarstarstar / 8
February 04, 2009

print this article



Well also need some PHP to finish off this example; in a new page in your text editor add the following code:




//connection information

$host = "localhost";

$user = "root";

$password = "your_password_here";

$database = "prototip";


//make connection

$server = mysql_connect($host, $user, $password);

$connection = mysql_select_db($database, $server);


//get parameter

$param = $_GET["q"];


//query the database

$query = mysql_query("SELECT * FROM contents WHERE tip LIKE '$param%'");


//get the data

$row = mysql_fetch_assoc($query);

$contents = $row["content"];


//return matching data

echo $contents;





Save this in the main prototipdirectory as contents.php. This is a very basic PHP script for getting data out of a database that matches the incoming parameter which is available under the $_GETsuperglobal.  

Id like to point out that this is the minimum amount of code required for this type of operation; security has not been a consideration in this example, so this file should not be used in a mission-critical application that is publicly available.  

To see this example, youll need to copy the prototip directory (containing the libraries, plugins and files that weve made so far) into a content-serving directory of your web server. Youll also need a MySQL database called prototip containing a table called contents, with the name of each tooltip in a column called tip and the content for each tooltip in a column called content. To make it easier to load data into this table once created, Ive included a text file in the source code download for this article which can be used to load the data.  

Once this has been done, you should be able to run the new page and see something like this:


>>> More AJAX & Prototype Articles          >>> More By Dan Wellman

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: