Using Click Interceptions with a Database-Driven Application

As I explained before, in this particular case I'm going to use the functionality of click interceptions to modify the default behavior of the MySQL-driven web application that you saw previously, and provide it with the capacity to visualize all of the corresponding user detail pages in the same web document.

Since this process will be performed without having to reload the whole web document, I'm going to use an Ajax HTTP Request object. It will first fetch the details of a specific user, and then display this data on screen.

Having said that, here's the signature of the JavaScript function that triggers HTTP requests with AJAX, which was also used in the first installment of this series:

// send http requests with Ajax

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);

}

Since the above "sendHttpRequest()" JavaScript function was covered in a previous article, I won't bore you explaining how it works. Instead, I will create a brand new function, which will be charged with displaying the full details of a specific user on the same web page.

The aforementioned function looks like this:

// define 'displayUserDetails()' function

function displayUserDetails(userData){

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

if(!userviewer){return};

userviewer.innerHTML=userData;

}

That's was very short to list, wasn't it? As you can see, the above "displayUserDetails()" function is tasked with showing the full details of a specified user in a simple DIV, identified as "userviewer," by using the non-standard "innerHTML" JavaScript property. If you wish, you can utilize the DOM instead, and implement a true standard solution.

So far, so good. At this stage, I defined two primary JavaScript functions, where the first one fetches detailed data about a particular user, stored on a simple MySQL database table, and the second one simply displays this information on a predefined containing DIV.

What's the next step? Well, as you may have guessed, it's necessary to use a few click interceptions to change the default behavior of the links that open the detail web pages, and make them display this data in the same web document.

The function listed below, named "intializeLinks()," performs this useful task. Have a look at it, please:

// 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;

}

}

}

As shown above, the "initializeLinks()" function is actually the one that performs the click interception process. In this concrete case, the function will interrupt the normal behavior of the links that open the respective user details web pages, and it will cause this data to be displayed on the same web document via an Ajax-based HTTP request.

With all the prior JavaScript functions already defined, do you now understand the convenience of using click interceptions when it comes to expanding the behavior of database-driven web applications? I bet you do!

However, if you're anything like me, you want to see how all of these functions can be linked properly with the structural markup of this MySQL-based web application.

Bearing in mind this possibility, in the final section of this tutorial I'm going to list for you the complete source code of all the files that comprise the aforementioned database-driven application, including the set of JavaScript functions just defined.

Click on the link below and keep reading. We're almost finished!