ajax tree,… we need that if we have parent and child field data on database. and we showing this data to tree form. ok we have simple script to do that.

follow this instruction :

1. create javascript code and place to javascript directory

ajax.js

		//

class.database.php

rows = 0;
if($_SERVER['HTTP_HOST'] == 'localhost' || ereg('^192\.168\.0\.[0-9]+$', $_SERVER['HTTP_HOST'])) {
/* Local connetion vars */
$this->host = "localhost";
$this->password = "root";
$this->user = "root";
$this->database = "database";
} else {
/* Internet connetion vars */
$this->host = "server";
$this->password = "password";
$this->user = "user";
$this->database = "database";
}
} // Method : end

function OpenLink()  { // Method : begin
$this->link = @mysql_connect($this->host,$this->user,$this->password); // or die (print "Class Database: Error while connecting to DB (link)");
if(mysql_error()) {
$this->connected = false;
$this->error = mysql_error();
} else {
}
return $this->connected;
} // Method : end

function SelectDB() { // Method : begin
if(!@mysql_select_db($this->database,$this->link)) {   //; or die (print "Class Database: Error while selecting DB");
$this->connected = false;
$this->error = mysql_error();
} else {
$this->connected = true;
}
} // Method : end

function CloseDB() { // Method : begin
mysql_close();
} // Method : end

function Query($query) { // Method : begin
$this->OpenLink();
$this->SelectDB();
$this->query = $query;
$this->result = mysql_query($query,$this->link) or die (print "Class Database: Error while executing Query");
$this->error = mysql_error();
// $rows=mysql_affected_rows();

if(ereg("SELECT",$query)) {
$this->rows = mysql_num_rows($this->result);
}
$this->CloseDB();
} // Method : end

// Return true if there was an error
function is_error() {
return (!empty($this->error)) ? true : false;
}

function fetchRow() { // Method : begin
return mysql_fetch_array($this->result);
$this->error = mysql_error();
} // Method : end

function getResult($row,$field) { // Method : begin
return mysql_result($this->result,$row,$field);
} // Method : end

function getError() { // Method : begin
return mysql_error();
} // Method : end

function getNumRows() { // Method : begin
return $this->rows;
} // Method : end

} // Class : end

?>

class.tree.php

<?phpid = $id;
$this->database = new Database();
if(!isset($this->id))
$this->id = 0;
}

// ********************** METODO LIST

function countSub($id) {
$sql =  "SELECT COUNT($this->fieldId) AS subOptions FROM $this->table";
$sql.= " WHERE $this->fieldFrom = $id;";
//echo $sql;
$this->database->rows = $this->database->getResult($this->database->query($sql),"subOptions");
}

function listSub($id) {
$sql =  "SELECT $this->fieldId,$this->fieldView FROM $this->table";
$sql.= " WHERE $this->fieldFrom = $id;";
//echo $sql;
return $this->database->query($sql);
}

function display() {
$this->listSub($this->id);
if($this->database->getNumRows() > 0) {
while($row=$this->database->fetchRow()) {

$tree_sub=new Tree($row[$this->fieldId]);
$tree_sub->countSub($row[$this->fieldId]);

echo "
";
echo (($tree_sub->database->getNumRows() > 0)?"fieldId].")\">[+]":"[-]");
echo " ".$row[$this->fieldView]."\n";
echo "
fieldId]."\" class=\"fld_ln\" style=\"display:none;\">

";
echo "


";
}
}
}

} // clase : fin

?>

3. create tree.php and tree_sub.php code

tree.php

display();
?>

tree_sub.php

display();
?>

CREATE TABLE `carpetas` (
`idCarpeta` int(11) NOT NULL auto_increment,
`chrNombre` char(20) default NULL,
`intDeCarpeta` int(11) default NULL,
`intEstado` tinyint(4) NOT NULL default '0',
PRIMARY KEY  (`idCarpeta`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

INSERT INTO `carpetas` VALUES (1, '/raiz', 0, 1);
INSERT INTO `carpetas` VALUES (2, 'primera', 1, 1);
INSERT INTO `carpetas` VALUES (3, 'tercera', 2, 1);
INSERT INTO `carpetas` VALUES (4, 'cuarta', 1, 1);
INSERT INTO `carpetas` VALUES (5, 'quinta', 2, 1);
INSERT INTO `carpetas` VALUES (6, 'sexta', 3, 1);
INSERT INTO `carpetas` VALUES (7, 'septima', 5, 1);
INSERT INTO `carpetas` VALUES (8, 'octava', 6, 1);
INSERT INTO `carpetas` VALUES (9, 'novena', 2, 1);
INSERT INTO `carpetas` VALUES (10, 'decima', 7, 1);
INSERT INTO `carpetas` VALUES (11, 'onceava', 5, 1);
INSERT INTO `carpetas` VALUES (12, 'doceava', 7, 1);
INSERT INTO `carpetas` VALUES (13, 'treceava', 12, 1);
INSERT INTO `carpetas` VALUES (14, 'catorceava', 7, 1);

6. to complete download code you can go to this link

This AJAX method periodically performs an AJAX request and updates a container’s contents based on the response text.

Containers are specified by giving IDs of the HTML elements like division or paragraphs. See example below.

Callbacks are called at various points in the life-cycle of a request, and always feature the same list of arguments. They are passed to requesters right along with their other options.
Syntax:

new Ajax.PeriodicalUpdater(container, url[, options]);

Ajax.PeriodicalUpdater features all the Common Options and callbacks, plus those added by Ajax.Updater().

There are two more options specific to this method:
Option Description
frequency Default value is 2.
This is the minimum interval at which AJAX requests are made.
decay Default value is 1.
This controls the rate at which the request interval grows when the response is unchanged.
Return Value :

* Returns AJAX PeriodicalUpdater object.

Disabling and Enabling a PeriodicalUpdater :

You can pull the brake on a running PeriodicalUpdater by simply calling its stop method. If you wish to re-enable it later, just call its start method. Both take no argument.
Example:

Click start button to see how Current Time changes.

This example may not work in IE.

Here is the content of timer.cgi script:

#!/usr/bin/perl

print “Content-type: text/html\n\n”;

$datetime = localtime;
print $datetime;
print ”
“;

www.tutorialspont.com

Depending on the source you’re planning to use, you’ll instantiate Ajax.Autocompleter or Autocompleter.Local, respectively. Although equipped with specific options, these two objects share a large feature set and provide a uniform user experience.

There are four things you’ll always pass to these objects when building them:

• The text field you want to make autocompletable. As usual, you can pass the field itself or the value of its id= attribute.
• The container for autocompletion choices, which will end up holding a <ul></li> list of options to pick from. Again, pass the element directly or its id=. This element is most often a simple <div>.</p></li>
• The data source, which will be expressed, depending on the source type, as a JavaScript array of strings or as a URL to the remote source.
• Finally, the options. As always, they’re provided as a hash of sorts, and both autocompletion objects can make do with no custom option; there are suitable defaults for everything.

To use script.aculo.us’s autocompletion capabilities, you’ll need to load the controls.js and effects.js modules along with prototype.js module. So your minimum loading for script.aculo.us will look like this:

<script type="text/javascript"
   src="/javascript/prototype.js">
</script>
<script type="text/javascript"
   src="/javascript/scriptaculous.js?load=effects,controls">
</script>

Creating an Ajax Auto-Completer:

The construction syntax is as follows:

new Ajax.Autocompleter(element, container, url [ , options ] )

The constructor for the Ajax.Autocompleter accepts four parameters:

• The element name or reference to a text field that is to be populated with a data choice.
• The element name or reference to a <div> element to be used as a menu of choices by the control
• The URL of the server-side resource that will supply the choices
• The usual options hash.

Options:

You can use or more of the following options while creating your Ajax.Autocompleter object.

Example:

<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type="text/javascript"
   src="/javascript/prototype.js"></script>
<script type="text/javascript"
   src="/javascript/scriptaculous.js?load=effects,controls">
</script>
<script type="text/javascript">
   window.onload = function() {
      new Ajax.Autocompleter(
         'autoCompleteTextField',
         'autoCompleteMenu',
         '/script.aculo.us/serverSideScript.php',
         {}
      );
}
</script>
</head>
<body>
   <p>Type something in this box and then select
   suggested option from the list </p>
   <div>
      <label>Text field:</label>
      <input type="text" id="autoCompleteTextField"/>
      <div id="autoCompleteMenu"></div>
   </div>
</body>
</html>

Now we need a server side to access this page and serve the data source URL (serverSideScript.php). You will keep a complete logic to display suggestions in this script.

Just for example, purpose I’m keeping simple HTML text in serverSideScript.php. You can write your script using CGI, PHP, Ruby or any other server side scripting to choose appropriate suggestions and format them in the form of <ul><li>…</li></ul> and pass them back to the caller program.

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>

you can download complete script on this link

source: www.tutorialspoints.com

Creating a Local Auto-completer:

Creating a local auto-completer is almost identical to creating an Ajax Auto-completer as we discussed in previous section.

The major difference lies in how the backing data set to use for auto-completion is identified to the control.

With an Ajax Auto-completer, we supplied the URL of a server-side resource that would perform the necessary filtering given the user input and return only the data elements that matched. With a Local Autocompleter, we instead supply the full list of data element, as a JavaScript String array, and the control itself perform the filtering operation within its own client code.

The whole construction syntax is actually as follows::

new Autocompleter.Local(field,
                        container,
                        dataSource [ , options ] );

The constructor for the Autocompleter.Local accepts four parameters:

• The element name or reference to a text field that is to be populated with a data choice.
• The element name or reference to a <div> element to be used as a menu of choices by the control
• For the third parameter, instead of a URL as with the server-assisted auto-completer, we supply a small String array, which contains all of the possible values.
• The usual options hash.

Options:

You can use or more of the following options while creating your Autocompleter.Local object.

Example:

<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type="text/javascript"
   src="prototype.js"></script>
<script type="text/javascript"
   src="scriptaculous.js?load=effects,controls">
</script>
<script type="text/javascript">
   window.onload = function() {
      new Autocompleter.Local(
        'autoCompleteTextField',
        'autoCompleteMenu',
        ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
        {ignoreCase:false}
      );
   }
</script>
</head>
<body>
<p>Type something in this box and then select
   suggested option from the list </p>
   <div>
      <label>Text field:</label>
      <input type="text" id="autoCompleteTextField"/>
      <div id="autoCompleteMenu"></div>
   </div>
</body>
</html>

you can download full code on this link

source : tutorialspoint