JAVASCRIPT » Ajax Tutorials

  Delicious Bookmark this on Delicious Share on Facebook SlashdotSlashdot It! Digg! Digg

Easy Grid

This package can be used to display and data grids using AJAX. It uses Yahoo User interface library Javascript classes to perform AJAX requests. A Javascript script calls Yahoo UI libraries to load the data for the table from the server.

Interactive Grid with Your Own Hands

I am sure being ‘pampered’ by GUI of desktop applications, users find interfaces of web-applications as extremely uncomfortable. Their notes, probably unexpressed, are timely within AJAX Age. Besides, it is not so difficult to make web-applications more user-friendly. I will not describe whole variety of interface forms in this article, but will concentrate on such an indispensable element as a grid. Almost every web-application needs linear data list management. DB record management of PhpMyAdmin is likely a classical solution in this field. It is a popular solution, but it demands page reloading for every operation, data loss is possible and so on. Let us think about what requirements should be included to be a user-friendly interface should have. The user should have the ability to sort the list by fields, filter the list, the possibility to assign a range of selecting and pagination. With all this going on, only part of the application window should be changed.

As far as you probably know, basis of AJAX is XMLHttpRequest. It is a Java Script instrument, which allows to perform requests to a remote server script and receive its responds. Thus, when a user is initiating some event (for instance, click to an icon), we can immediately inform the server script. When the server script receives the request, it starts to ‘find out’ in referred parameters what it should return, for example, the record list, which is sorted by some user input criterion. Java Script retrieves the list and displays it in a table area. The user watches, with pleasure, the line order of the table being changed to his input request., while all other forms of this application window remain unchanged.

Model of the solution

Figure 1. Model of the solution

How to do it? Use of XMLHttpRequest is not a difficult task. However, we can simplify this by adding a ready script library to our arsenal.. I liked a solution from YUI toolkit, which is known as Connector. With help of unpretentious construction, YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData); we can send POST-parcel to the specified address and analyze the response from the server script with the function, assigned within callback.

So, by using HTML, we describe the interface to the future of the grid. We omit areas, which are dependent on server script responds (records list, indicator of record number), but leave “anchors” so that we can manage content from those areas dynamically. It can be any sort of HTML-containers with the assigned unique ID. Next, we describe the functions of server respond processing. For example,

var handleSuccess = function(o){
             if(o.responseText !== undefined){
                         document.getElementById(divName).innerHTML =

var handleFailure = function(o){
             if(o.responseText !== undefined){
                         document.getElementById(divName).innerHTML =
'Server Error';

var callback =

Likely, someone will question “But what do we receive from server?”. We receive content of server script console. In the simplest case, it will be HTML of the updated table. But it means mixed data and its decoration. I.e. every table modification will demand modification of the server script, which will adversely affect readability of application business logic. Classical universal solution of data structure transferring is XML. In that case, we will have to analyze reported content each time with Java Script and form HTML or give that charge to XSLT. You can read about it in the “AJAX:Getting started” article. But I suggest to use another more comfortable format JSON. It will allow to transfer less amounts of data, will not have difficulty with special symbols and we will have no need to analyze server script responds. JSON is for Java Script ready to use construction.

So, now we only need to define set of parameters of various events and add their processing into the server script. Assume, if “Show” button is pressed, we are passing to the server script, taken from INPUT TEXT the list offset and number of displayed records. The server script inserts those values into SQL query and transforms the record list to JSON form. We can “run” about received array lines and decorate them with HTML.

Commercial grid sample

Figure 2. Commercial grid sample

As you can see, the new opportunities are coming to us. We can make Java Script on the client side to repeat requests automatically right up to successful transaction, if there are any troubles with a network connection. We can realize adequate indication of the process. We can make the filters more interactive by sorting the list automatically in accordance with the entered part of the filtration key. Well, we can use as much of our imaginations as we allow.

You can download the code archive, which contains all of the files you will need to create the working examples presented here.

The same Javascript script performs the AJAX interaction with the PHP script that includes the PHP class. This PHP class accesses an CSV file with the data to be displayed and edited in the grid. The grid supports column sorting, data filtering, pagination and context menu that appears when the menu mouse button is clicked.

Free   Version: n/a   Platform(s): All   Updated:  July 16, 2008

Developer:Dmitry Sheiko Demo Download  
Rated by: 1 user(s)  
Follow Navioo On Twitter

Submit a resource