PHP Classes

File: testtreeview.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in Bookmark in
  Classes of Thomas Jakober  >  AJAX Tree view class  >  testtreeview.php  >  Download  
File: testtreeview.php
Role: Example script
Content type: text/plain
Description: testtreeview.php
Class: AJAX Tree view class
Display a tree view from MySQL data that uses AJAX
Author: By
Last change: Changed comment about proxy and firewall configuration to run the example.
Date: 5 years ago
Size: 3,901 bytes


Class file image Download

 * testtreeview.php
 * @version $Id$
 * @copyright 2009
 * This page is an example using the AJAX treeview.class.php
 * The example establishes a connection on port 3306 to my database server.
 * To allow this, the server which runs the example may not be behind a proxy
 * and you must free this port on your firewall.
 * It connects to a database with about 43000 records of a car brand and
 * model index. The car models are ordered in a tree with the levels
 * country, make, model, series and engines.
 * Clicking on the text selects the node and displays the amount of the sub
 * nodes or a photo of the car if available. For this, an AJAX function is
 * called which return the html code to be placed into the container div element.
 * The connection parameters allow you to read from the database but not modify
 * the records.

include "treeview.class.php";

$db = mysql_connect('', 'clcar_r', 'LVKmN96XBteTT8cR');
mysql_set_charset('utf8', $db);

$oTv = new treeView('carindex', 'disp');
$oTv->jFunct = "showContent(pNode)";
$oTv->sortOrder = 'disp';

if (isset(
$_POST['parent'])) {
$oTv->treeNode($_POST['parent'], $_POST['last']);

if (isset(
$_POST['id'])) {
$s = '';
$aEntry = getRec('carindex', $_POST['id']);
    if (
$aEntry['country']) {
$aCnt = queryTable("select count(id) as count from make where = $aEntry[country]");
$s = "<h3>$aEntry[disp]</h3>";
$s .= "This country has $aCnt[count] makes.";
    } else if (
$aEntry['make']) {
$aCnt = queryTable("select count(id) as count from model where model.make = $aEntry[make]");
$s = "<h3>$aEntry[disp]</h3>";
$s .= "This make produced $aCnt[count] models.";
    } else if (
$aEntry['model']) {
$aCnt = queryTable("select count(id) as count from serie where serie.model = $aEntry[model]");
$s = "<h3>$aEntry[disp]</h3>";
$s .= "From this model where $aCnt[count] series produced.";
    } else if (
$aEntry['serie']) {
$aSerie = getRec('serie', $aEntry['serie']);
        if (
$aSerie['image']) {
$aImage = getRec('images', $aSerie['image']);
$s = "<img id=\"carimg\" src=\"$aImage[imgname]\" />";
        } else {
$s = "<h4>No Image available</h4>";

getRec($table, $id){
$sq = "select * from $table where id=$id";

queryTable($sq) {
$rs = mysql_query($sq);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
        <title>Test Treeview</title>
        <link rel="stylesheet" type="text/css" href="treeview.css">
        <style type="text/css">
            #tree {float: left}
            #content {float: left; height: 300px; width: 500px; margin-left: 10px}
            #carimg { width: 400px; height:300px }
        <script type="text/javascript" src="tree.js"></script>
        <script type="text/javascript">
            function showContent(oNode){
                var nodeId =;
                sendString('id='+nodeId, location.pathname, 'content');

            function sendString(pString, pUrl, pDest, pFunc){
                var nPar = arguments.length;
                var oRq = new XMLHttpRequest();
      "POST", pUrl, true);
                oRq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                oRq.onreadystatechange = function () {
                    if (oRq.readyState == 4) {
                        if (oRq.status == 200) {
                            var oDest = document.getElementById(pDest);
                            oDest.innerHTML = oRq.responseText;
                            if (pFunc) {
    <h3>Test treeView</h3>
    <div id="tree"><?=$oTv->treeView()?></div>
    <div id="content"></div>