JAVA

Creating a Dynamic Scrollbar for an AJAX-based Pagination System

Looking for new ways to integrate AJAX with your existing Web applications? Look no further. Over the course of this three-part series, called "Building a dynamic pagination system with AJAX," you'll learn how to develop a complete result set pagination mechanism, which uses a browser-like scroll bar for displaying chunks of database records, all without having to appeal to page reloads.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 27

June 12, 2006

TABLE OF CONTENTS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DYNAMIC SCROLLBAR WITH AJAX</title>
<script type="text/javascript" src="path-to-library/x_core.js"></script>
<script type="text/javascript" src="path-to-library /x_event.js"></script>
<script type="text/javascript" src="path-to-library /x_drag.js"></script>
<script type="text/javascript">

// initialize 'controlbar' element and assign events
function initControlBar(){
    var controlbar=xGetElementById('controlbar');
    if(!controlbar){return};
    xMoveTo(controlbar,700,68);
    xEnableDrag(controlbar,controlbarOnDragStart,controlbarOnDrag,
controlbarOnDragEnd);
    xShow(controlbar);
}

// define 'controlbarOnDragStart()' function
function controlbarOnDragStart(obj,mdx,mdy){
obj.totalMY=!obj.totalMY?0:obj.totalMY;
}

// define 'controlbarOnDrag()' function
function controlbarOnDrag(obj,mdx,mdy){
    obj.totalMY+=mdy;
    window.status=obj.totalMY;
    if(obj.totalMY>345){obj.totalMY=345;return};
    if(obj.totalMY<0){obj.totalMY=0;return};
    xMoveTo(obj,700,xTop(obj)+mdy);
}

// define 'controlbarOnDragEnd()' function
function controlbarOnDragEnd(obj,mdx,mdy){
    // modify this divisor to scope all rows
    var newoffset=Math.round(obj.totalMY/80);
    if(newoffset!=offset){
        offset=newoffset;
        sendHttpRequest(newoffset);
    }
}

// return XMLHttpRequest objects
function getXMLHttpRequestObject(){
    var xmlobj;
    // check for existing requests
    if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
        xmlobj.abort();
    }
    try{
        // instantiate object for Mozilla, Nestcape, etc.
        xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            // instantiate object for Internet Explorer
            xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e){
            // Ajax is not supported by the browser
            xmlobj=null;
            return false;
        }
    }
    return xmlobj;
}

// send http request
function sendHttpRequest(offset){
    // open socket connection
    xmlobj.open('GET','getdata.php?offset='+offset,true);
    // set http header
    xmlobj.setRequestHeader('Content-Type','text/html; charset=UTF-8');
    xmlobj.onreadystatechange=xmlobjStatusChecker;
    // send request
    xmlobj.send(null);
}

// check status of requester object
function xmlobjStatusChecker(){
    // if http request is completed
    if(xmlobj.readyState==4){
        if(xmlobj.status==200){
            // if status == 200 display database records
            displayData();
        }
        else{
            alert('Failed to get response :'+xmlobj.statusText);
        }
    }
}

// display database records
function displayData(){
    var div=document.getElementById('datacontainer');
    if(!div){return};
    div.innerHTML='';
    var rows=xmlobj.responseText.split('|');
    for(var i=0;i<rows.length-1;i++){
        var p=document.createElement('p');
        p.appendChild(document.createTextNode(rows[i]));
        div.appendChild(p);
    }
}

// initialize offset
var offset=0;

// initialize XMLHttpRequest object
var xmlobj=getXMLHttpRequestObject();
// turn 'controlbar' a dragging element when page is loaded
window.onload=function(){
    // check if browser isDOMcompatible
    if(document.createElement&&document.getElementById&&document.
getElementsByTagName){
        // initialize 'controlbar' element
        initControlBar();
        // send initial request
        sendHttpRequest(offset);
    }
}
</script>
<style type="text/css">
.handle{
    width: 16px;
    height: 118px;
    position: absolute;
    background: url('handle.gif') center center no-repeat;
    margin: 0;
    padding: 0;
    cursor: default;
    z-index: 2;
}

#scrollbar{
    width: 18px;
    height: 500px;
    position: absolute;
    top: 50px;
    left: 700px;
    background: url('scrollbar.gif') center center no-repeat;
    margin: 0;
    padding: 0;
    z-index: 1;
}

#datacontainer{
    width: 500px;
    height: 498px;
    position: absolute;
    top: 50px;
    left: 198px;
    background: #fc6;
    border: 1px solid #ccc;
    margin: 0;
    padding: 5;
}

p{
    font: normal 12px Verdana, Arial;
    color: #000;
    padding: 5px;
    border: 1px solid #000;
    background: #f7f8cb;
}
</style>
</head>
<body>
<div id="controlbar" class="handle"></div>
<div id="scrollbar"></div>
<div id="datacontainer">Data goes here</div>
</body>
</html>

That's all as far as the full client code for the pagination application. However, I'd like to highlight two important things: first, make sure you have downloaded the complete X library. To do that, please visit the author's site, located at: http://www.cross-browser.com. And second, notice the additional JavaScript function attached to the "onload" event handler, which initializes the scroll bar's handle and fetches the first packet of database records.

Wrapping up

We're done for the moment. Over this second part of the series, I provided you with all the JavaScript functions that allow retrieval in the background of several chunks of database records. This results in the implementation of a quite useful pagination system, without having to include any links.

In the last tutorial, you'll see how the application pulls records from a MySQL table and sends them back to the client for further display. It's going to be an exciting experience, so see you there!

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.