October 20, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Implementing Dynamic Scroll with Ajax, JavaScript, and XML

  • June 6, 2007
  • By Vlad Kofman
  • Send Email »
  • More Articles »

Implementation of the Dynamic Table

To implement the table, I have separated the presentation into a CSS style called "scrolltable" and created a div with id "new_items_div" and an inner table with id "new_items".

The "status" div's purpose is to display various messages.



Click here for a larger image.

Figure 7: Code to detect scroll on the page

The first part of the logic to auto-append more rows involves the detection of where the user has already scrolled. To do this, I created a JavaScript function detectScroll() that is polled at half-second intervals. The overhead of polling is minimal, but as an alternative, I could have created a handler function for the scroll event and attached it to the div. The startPolling function is called once at the time the entire page loads, and it starts to call detectScroll periodically.

The algorithm, which detects scroll position, checks to see whether the distance already scrolled is greater than or equal to the content height.viewport height. I also add 20 pixels to the distance to account for the scroll bar size and to make sure the position of the scroll bar is a little prior to very end, before the new row fetch occurs.

Fetch if [scroll Top distance >= (scroll Height - client Height) + 20]

If the user scrolls up after scrolling down, no new rows are fetched because this condition will not be true.

Here is the source in JavaScript.



Click here for a larger image.

Figure 8: Screen shot of the final table

If the condition is met when detectScoll executes, a new JavaSript function fectchAction is called. I also update the "status" div with the total row count.

The fetchAction function below executes the asynchronous call to the server, using the XMLHttpRequest object, and assigns a callback function, readFeed, to process the response. The server side implementation is irrelevant; as long as it returns valid XML, it can be done in any language. In this case, it's PHP, but it can be Java, .NET, and so on.

Dynamic Parsing and Insertion of the Data

For the front end to properly parse the response and dynamically append a row to the table, the back end should return XML similar to this code snippet:

<?xml version='1.0' encoding='ISO-8859-1'?>
<channel>
   <item>
      <title>Vlad</title>
      <body><![CDATA[some text]]></body>
   </item>
</channel>

The callback function readFeed is called when the server responds with the XML. The first thing this function does is obtain a handle on the XML structure, xmlHttp.responseXML.documentElement. It then gets all elements' names "item" and loops through them, pulling out title and body. The title and body are then passed to the helper function addRow that does the dirty work of appending the data to the table. addRow gets the table object, inserts a new row at the end, and inserts the title and body HTML.

Here is the implementation of the readFeed function:

And here is the implementation of the addRow function. For the complete source, please see the download section.

In the sample page, initially when it loads there are 10 rows; when the user moves the scroll bar down, 10 more rows appear. The end result looks something like this:

          

This is all the logic needed to make an Ajax-enabled dynamic table.

Conclusion

In this article, I have covered the implementation of an Ajax-enabled dynamic table that fetches new rows of data as the user scrolls down, and appends them at the end. The table's appearance is defined with the CSS and dynamic behavior is controlled with JavaScript.

A possible downside to this approach is a potential of a client requesting a lot of data and running out of memory. Because this scroll is only limited by the amount of data on the server, the client may request all of it; this technique will store it in the client's memory.

Another potential downside of this approach is that the resulting page is not very search engine friendly. Although a dynamic table is very user-friendly, because search engines such as Google do not index dynamic content (yet) produced by JavaScript, this table will be invisible to the web indexing crawlers. Just keep this in mind when developing any rich client applications.

Download Source

You can download the code that accompanies this article here.

References

About the Author

Vlad Kofman works on enterprise-scale projects for the major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel