Displaying Dynamic Content with Pop Up DIVs with the DOM and AJAX

If you’ve read the two preceding articles of the series, you’ll know that creating pop-up boxes with the DOM is an educational experience which can be tackled with an intermediate background in JavaScript and CSS. Quite possibly, you’ll recall that in the previous part I developed a simple script which could display multiple pop-up DIVs in the same web document. This is very convenient in those cases where extra information that is not crucial needs to be presented to visitors of a web site.

Although the application that I created previously can be used with most modern browsers, it lacked an important feature. All the pop-up boxes were designed to show only static content, undoubtedly a serious limitation considering that the web is now essentially dynamic. Is there any way to overcome this limitation? Of course there is!

Here is where AJAX comes in, since it’s feasible to use an HTTP requester object to pull data from the server in the background and display it with these pop-up DIVs. One immediate application of this functionality would be a dynamic advertising system, but this schema can be used for many other purposes too.

Therefore, in this last part of the series, I’ll show you how to improve the original application by making it possible to fill the pop-up DIVs with dynamic content. As you know, this will be achieved by using the neat features of AJAX.

The challenge is right ahead of us. Let’s tackle it together now!