JavaScript
  Home arrow JavaScript arrow Page 4 - Using Click Interceptions with a Database-...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Using Click Interceptions with a Database-Driven Application
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2008-11-19

    Table of Contents:
  • Using Click Interceptions with a Database-Driven Application
  • Fetching user-related data with MySQL
  • Visualizing multiple user detail pages in the same web document
  • The full source code of the improved MySQL-driven application

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Using Click Interceptions with a Database-Driven Application - The full source code of the improved MySQL-driven application


    (Page 4 of 4 )

    As I promised you in the section that you just read, here are all of the source files that compose this basic MySQL-driven application after the behavior of the user detail web pages has been enriched by means of the click-interception approach:


    (definition of 'list_users.htm' file)


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Building with AJAX an user detail page using click interceptions</title>

    <style type="text/css">

    body{

    padding: 0;

    margin: 0;

    background: #fff;

    }

    h1{

    font: bold 18pt Arial, Helvetica, sans-serif;

    color: #000;

    }

    h2{

    font: bold 16pt Arial, Helvetica, sans-serif;

    color: #000;

    }

    a:link,a:visited{

    font: normal 10pt Arial, Helvetica, sans-serif;

    color: #00f;

    }

    a:hover{

    color: #f90;

    }

    p{

    font: normal 10pt Arial, Helvetica, sans-serif;

    color: #000;

    }

    #linkcontainer{

    width: 300px;

    padding: 5px;

    background: #ffc;

    }

    #userviewer{

    width: 300px;

    }

    </style>

    <script language="javascript" type="text/javascript">

    // send http requests


    function sendHttpRequest(url,callbackFunc,respXml){

    var xmlobj=null;

    try{

    xmlobj=new XMLHttpRequest();

    }

    catch(e){

    try{

    xmlobj=new ActiveXObject("Microsoft.XMLHTTP");

    }

    catch(e){

    alert('AJAX is not supported by your browser!');

    return false;

    }

    }

    xmlobj.onreadystatechange=function(){

    if(xmlobj.readyState==4){

    if(xmlobj.status==200){

    respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval(callbackFunc+'(xmlobj.responseText)');

    }

    }

    }

    // open socket connection

    xmlobj.open('GET',url,true);

    // send http header

    xmlobj.setRequestHeader('Content-Type','text/html; charset=UTF-8');

    // send http request

    xmlobj.send(null);

    }


    // define 'displayUserDetails()' function


    function displayUserDetails(userData){

    var userviewer=document.getElementById('userviewer');

    if(!userviewer){return};

    userviewer.innerHTML=userData;

    }


    // define 'initializeLinks()' function


    function initializeLinks(){

    var lnkcont=document.getElementById('linkcontainer');

    if(!lnkcont){return};

    var links=lnkcont.getElementsByTagName('a');

    if(!links){return};

    for(var i=0;i<links.length;i++){

    // use click interception to display user details on the same web page

    links[i].onclick=function(){

    sendHttpRequest('viewuserdetails.php?id='+this.href.split('=')[1],'displayUserDetails');

    return false;

    }

    }

    }

    // call 'initializeLinks()' function when web page is loaded

    window.onload=function(){

    if(document.getElementById&&document.
    getElementsByTagName&&document.createElement){

    initializeLinks();

    }

    }

    </script>

    </head>

    <body>

    <h1>Example on building with AJAX an user detail page using click interception</h1>

    <div id="linkcontainer">

    <ul>

    <li><a href="viewuserdetails.php?id=1" title="View details about Alejandro Gervasio...">View details about Alejandro Gervasio...</a></li>

    <li><a href="viewuserdetails.php?id=2" title="View details about John Doe...">View details about John Doe...</a></li>

    <li><a href="viewuserdetails.php?id=3" title="View details about Susan Norton...">View details about Susan Norton...</a></li>

    <li><a href="viewuserdetails.php?id=4" title="View details about Marian Wilson...">View details about Marian Wilson...</a></li>

    </ul>

    </div>

    <div id="userviewer"></div>

    </body>

    </html>


    (definition of 'viewuserdetails.php' file)


    <?php

    // include classes

    class MySQL{

    private $host;

    private $user;

    private $password;

    private $database;

    private $conId;

    // constructor

    function __construct($options=array()){

    if(!is_array($options)){

    throw new Exception('Connection options must be an array');

    }

    foreach($options as $option=>$value){

    if(empty($option)){

    throw new Exception('Connection parameter cannot be empty');

    }

    $this->{$option}=$value;

    }

    $this->connectDb();

    }

    // private 'connectDb()' method

    private function connectDb(){

    if(!$this->conId=mysql_connect($this->host,$this->user,$this->password)){

    throw new Exception('Error connecting to MySQL');

    }

    if(!mysql_select_db($this->database,$this->conId)){

    throw new Exception('Error selecting database');

    }

    }

    // public 'query()' method

    public function query($sql){

    if(!$result=mysql_query($sql)){

    throw new Exception('Error running query '.$sql.' '.mysql_error());

    }

    return new Result($this,$result);

    }

    }


    class Result{

    private $mysql;

    private $result;

    // constructor

    public function __construct($mysql,$result){

    $this->mysql=$mysql;

    $this->result=$result;

    }

    // public 'fetchRow()' method

    public function fetchRow(){

    return mysql_fetch_array($this->result,MYSQL_ASSOC);

    }

    // public 'count()' method

    public function countRows(){

    if(!$rows=mysql_num_rows($this->result)){

    throw new Exception('Error counting rows');

    }

    return $rows;

    }

    // public 'get_insertId()' method

    public function getInsertId(){

    if(!$insId=mysql_insert_id($this->mysql->conId)){

    throw new Exception('Error getting insert ID');

    }

    return $insId;

    }

    // public 'seek()' method

    public function seekRow($row=0){

    if(!is_int($row)&&$row<0){

    throw new Exception('Invalid row parameter');

    }

    if(!$row=mysql_data_seek($this->mysql->conId,$row)){

    throw new Exception('Error seeking row');

    }

    return $row;

    }

    // public 'getAffectedRows()' method

    public function getAffectedRows(){

    if(!$rows=mysql_affected_rows($this->mysql->conId)){

    throw new Exception('Error counting affected rows');

    }

    return $rows;

    }

    }


    try{

    // connect to MySQL

    $db=new MySQL(array('host'=>'host','user'=>'user','password'=>'pass','database'=>'database'));

    $id=!$_GET['id']?1:$_GET['id'];

    // run query

    $result=$db->query("SELECT firstname,lastname,email,comments FROM users WHERE id='$id'");

    // display user information

    $row=$result->fetchRow();

    if($result->countRows()==1){

    echo '<h2>User Information</h2>';

    echo '<p><strong>First Name: </strong>'.$row['firstname'].'</p>';

    echo '<p><strong>Last Name: </strong>'.$row['lastname'].'</p>';

    echo '<p><strong>Email: </strong>'.$row['email'].'</p>';

    echo '<p><strong>Comments: </strong>'.$row['comments'].'</p>';

    }

    }

    catch(Exception $e){

    echo $e->getMessage();

    exit();

    }

    ?>


    In addition to the source files listed above, below I included an illustrative image that shows how the details of a particular user are displayed on the same web page, instead of opening a new window:



    Final thoughts

    That's all for now. In this third installment of the series, you hopefully learned how to use click interceptions to extend the existing functionality of a small MySQL-driven web application.

    Nevertheless, this educational journey hasn't finished yet, since in its last chapter, I'll show you how to utilize click interceptions to display the contents of different text files on a unique web page container.

    Don't miss the next part!


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

       · This third chapter of the series goes one step further and discusses the use of...
     

    JAVASCRIPT ARTICLES

    - Validating Digits and Dates with jQuery`s Va...
    - Validating Ranges, Emails, and URLs with jQu...
    - More Uses for the jQuery Tooltip Plug-in`s b...
    - Building Image-Based Tooltips with the jQuer...
    - Using the jQuery Tooltip Plug-in`s bodyHandl...
    - Using Rangelength, Min and Max with the Vali...
    - Using Minlength and Maxlength with the Valid...
    - Modifying Tooltip Coordinates with the jQuer...
    - Applying a Fade Out Effect with the jQuery T...
    - Tracking Mouse Movements with the jQuery Too...
    - Checking Online Forms with the Validator jQu...
    - Nested JavaScript Functions as Objects
    - The jQuery Tooltip Plug-in
    - Active Client Pages at the Server
    - ACP Tab Web Page







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 2 Hosted by Hostway
    Stay green...Green IT