Building a Pagination System with AJAX - Defining the (X)HTML markup and JavaScript functions
(Page 4 of 4 )
Assuming that you didn't have any problems understanding the CSS rules that I defined before, the (X)HTML markup that makes up the structure of the user interface is simply reduced to the following DIV elements:
<div id="controlbar" class="handle"></div>
<div id="scrollbar"></div>
<div id="datacontainer">Dynamic data goes here</div>
Did you think the (X)HTML to be defined was much longer? Not at all. As you can see, the three previous DIVS are all the web page elements that I need for creating the structure of the AJAX-based scrolling system. Of course, the first two containers will display the fake scrollbar, while the third one will render the containing structure where the chunks of database records will be appropriately shown.
Now that you know how the corresponding (X)HTML markup is defined, let me go one step further and show you the skeleton of all the JavaScript functions that will make the scrollbar work as expected, in conjunction with sending the required HTTP requests for fetching database records in the background. Here is how these functions are structured:
// initialize 'controlbar' element and assign events
function initControlBar(){
// function code goes here
}
// run code when dragging process starts
function controlbarOnDragStart(){
// function code goes here
}
// run code during dragging process
function controlbarOnDrag(){
// function code goes here
}
// run code when dragging process is over
function controlbarOnDragEnd(){
// function code goes here
}
// get XMLHttpRequest objects
function getXMLHttpRequestObject(){
// function code goes here
}
// send http requests
function sendHttpRequest(offset){
// function code goes here
}
// check status of requester objects
function xmlobjStatusChecker(){
// function code goes here
}
// display database records
function displayData(){
// function code goes here
}
Okay, I think that’s all with reference to the structural definition of the JavaScript functions, in order to implement the client-side programming of the scrolling application. As you can appreciate, the four first functions are completely aimed at simulating a realistic “drag-and-drop” effect for the handle of the scrollbar, which will be controlled by a JavaScript library that I used in previous DHTML tutorials.
If this doesn’t sound familiar to you, I’m talking about Michael Foster’s X library, a powerful package that allows you to construct elements that drag easily, among other cool things. Regarding the remaining JavaScript functions, they’re pointed to handling all the HTTP requests via AJAX, as well as displaying the sets of paginated records pulled straight from a database. Simple, right?
Well, if you want to see the full source code that corresponds to the user interface of the scrolling application, here it is:
<!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">
// initialize 'controlbar' element and assign events
function initControlBar(){
// function code goes here
}
// run code when dragging process starts
function controlbarOnDragStart(){
// function code goes here
}
// run code during dragging process
function controlbarOnDrag(){
// function code goes here
}
// run code when dragging process is over
function controlbarOnDragEnd(){
// function code goes here
}
// get XMLHttpRequest objects
function getXMLHttpRequestObject(){
// function code goes here
}
// send http requests
function sendHttpRequest(offset){
// function code goes here
}
// check status of requester objects
function xmlobjStatusChecker(){
// function code goes here
}
// display database records
function displayData(){
// function code goes here
}
</script>
<style type="text/css">
.handle{
width: 16px;
height: 118px;
position: absolute;
background: url('handle1.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('scrollbar1.gif') center center no-repeat;
margin: 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">Dynamic data goes here</div>
</body>
</html>
Wrapping up
We’re done for now. In this tutorial, I went through the key points for implementing a dynamic scrolling system, which is based on AJAX. As I said before, the main advantage of this mechanism rests on the ease of displaying chunks of database records, without having to include any page links.
Over the next article, I’ll be writing all the JavaScript code required to put the dynamic scrollbar to work, in addition to performing HTTP requests in the background. Meet you in the next part!
| 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. |
