Home arrow JavaScript arrow Displaying Dynamic Content with Pop Up DIVs with the DOM and AJAX

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

If you’re searching for a straightforward guide on how to create pop-up boxes for displaying additional information in your web site, then look no further because your search is over. Welcome to the concluding installment of the series “Building pop-up DIVs with the DOM and AJAX.” This three-part series walks you through the process of constructing pop-up DIVs, which can be used for showing data coming from static and dynamic sources.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 30
February 14, 2007
  1. · Displaying Dynamic Content with Pop Up DIVs with the DOM and AJAX
  2. · The source code of the previous pop-up application
  3. · Adding the functionality of AJAX to the existing application
  4. · Completing the application

print this article

Displaying Dynamic Content with Pop Up DIVs with the DOM and AJAX
(Page 1 of 4 )

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!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials