Creating a Dynamic Scrollbar for an AJAX-based Pagination System - Assembling the pieces: listing the full client code of the pagination system
(Page 4 of 4 )
As I said previously, here is the complete client-side code that corresponds to the AJAX-based pagination system. Notice that I also attached the CSS rules and the (X)HTML markup that were covered in the first tutorial:
<!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. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 19 
