Displaying Dynamic Content with Pop Up DIVs with the DOM and AJAX - Completing the application
(Page 4 of 4 )
To make all the pop-up DIVs capable of showing dynamic content, when they’re displayed in a web page, I’m going to define two primary files. The first one, called “popup.htm,” will be responsible for including the mentioned pop-up boxes in the web document, as well as for sending requests to the web server to fetch data from a text file.
As you may guess, the second file, which I named “getdata.php,” is simply a short PHP script that reads data from the mentioned text file, and sends it back to the client to be displayed by the corresponding DIVs. Sounds really simple, right?
All right, we will assume that the contents of the sample text file that I just referenced are the following:
This is dynamic content for DIV 1 and it has been loaded from a text file.
This is dynamic content for DIV 2 and it has been loaded from a text file.
This is dynamic content for DIV 3 and it has been loaded from a text file.
In this case, the definition for the respective “popup.htm” file looks like this:
<!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>AJAX-based Pop-Up DIVS</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
.popupcontainer{
width: 300px;
padding: 10px;
margin: 0 0 10px 0;
background: #eee;
border: 1px solid #ccc;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
.popupdiv{
position: absolute;
width: 200px;
padding: 5px;
background: #ffc;
border: 1px solid #ccc;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
</style>
<script language="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);
}
// display fill pop-up DIVS with server contents
function displayResults(content){
var popupdiv=document.getElementById('popup');
if(!popupdiv){return};
popupdiv.innerHTML='';
popupdiv.innerHTML=content;
}
// display Pop Up div element
function displayPopupDiv(e){
var posx=0;
var posy=0;
if(!e){var e=window.event};
// determine target DIV
var targ=e.target?e.target:e.srcElement;
// calculate mouse coordinates
if(e.pageX||e.pageY){
posx=e.pageX;
posy=e.pageY;
}
else if(e.clientX||e.clientY){
posx=e.clientX;
posy=e.clientY;
// check for scroll offsets in IE 6
if(document.documentElement.scrollLeft ||
document.documentElement.scrollTop){
posx+=document.documentElement.scrollLeft;
posy+=document.documentElement.scrollTop;
}
}
// assign attributes to pop-up DIV element and append
// it to web document tree
var div=document.getElementById('popup');
if(!div){
var div=document.createElement('div');
div.setAttribute('id','popup');
div.className='popupdiv';
document.getElementsByTagName('body')[0].appendChild
(div);
sendHttpRequest('getdata.php?
id='+targ.id,'displayResults');
}
// move pop-up DIV element
div.style.top=posy+5+'px';
div.style.left=posx+5+'px';
}
// remove pop-up DIV element
function hidePopupDiv(){
var div=document.getElementById('popup');
if(!div){return};
div.parentNode.removeChild(div);
}
// activate pop-up DIV elements
function activatePopupDivs(){
var divs=document.getElementsByTagName('div');
if(!divs){return};
for(var i=0;i<divs.length;i++){
if(divs[i].className=='popupcontainer'){
// display pop-up DIV element
divs[i].onmousemove=displayPopupDiv;
// hide pop-up DIV element
divs[i].onmouseout=hidePopupDiv;
}
}
}
// activate pop-up DIV elements when web page has been
// loaded
window.onload=function(){
if(document.getElementById && document.createElement &&
document.createTextNode){
activatePopupDivs();
}
}
</script>
</head>
<body>
<h1>AJAX-based pop-up DIVS</h1>
<div class="popupcontainer" id="container0">
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...
</div>
<div class="popupcontainer" id="container1">
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...
</div>
<div class="popupcontainer" id="container2">
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...<br />
Content for containing DIV goes here...
</div>
</body>
</html>
Having listed the full client-side code of the application, here’s the definition for the “getdata.php” file that I discussed before:
<?php
if(!$contents=file('data.txt')){
trigger_error('Error reading from data file',E_USER_ERROR);
}
$_GET['id']=str_replace('container','',$_GET['id']);
$id=get_magic_quotes_gpc()?$_GET['id']:addslashes($_GET
['id']);
echo $contents[$id];
?>
Finally, the result of putting the previous three files to work in conjunction can be appreciated by the following screen shot. Take a look at it, please:
As you can see by the above image, now pop-up DIVs can display content directly from a text file located in the server. Of course, this model can be used for fetching data from a database table, or an XML file as well. In this case, the possibilities are certainly numerous.
Final thoughts
Unfortunately, we’ve come to the end of the series. In this final installment, I showed you how to use the neat capabilities brought by AJAX to provide pop-up DIVs with the capacity for displaying content fetched directly from the server.
Although pop-up boxes can be quite useful in specific cases, don’t rely on them for showing crucial information for your website. As you know, they should always be utilized only for displaying additional content. See you in the next web development tutorial!
| 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. |
/ 15 
