JAVASCRIPT

Displaying Dynamic Content with Pop Up DIVs with the DOM and AJAX

If you’re searching for a straightforward guide on how to create pop-up boxes for displaying additional information in your web site, then look no further because your search is over. Welcome to the concluding installment of the series “Building pop-up DIVs with the DOM and AJAX.” This three-part series walks you through the process of constructing pop-up DIVs, which can be used for showing data coming from static and dynamic sources.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 22

February 14, 2007

TABLE OF CONTENTS:

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.