Product Design Lessons

Intro to Foundation  |   Lesson #127

Dynamically Update Your Web Pages

Learn how to load dynamic content with AJAX into the Foundation Reveal Modal after it is opened.

You might want to receive data from a server - after the page has loaded, and use it change you pages. JavaScript can fetch content asynchronously using a technology known as AJAX that allows you to dynamically load external resources into a container without leaving or refreshing the current page. In this lesson you'll learn a simple hands-on example to load AJAX content into the Foundation Reveal Modal after it is opened.

There are 2 different ways we can load the content for the reveal dynamically. The first is to load the content first, and only once it is loaded, launch the modal. The second is to open the modal with some sort of loading screen, and then fetch the content and replace the loading screen with the real content. This is part 2 of a 2 part series.

Using AJAX to load dynamic content into the modal after it is opened.

1. Setup Your Markup

For both approaches to creating an AJAX-based reveal modal, we’ll want to start with an empty modal and a button to launch it. We’re loading the content after we show the modal. It looks like this:

This modal looks essentially the same as a modal without any AJAX at all. The only difference is that instead of the content you’re going to show, you have some sort of “Loading” state while the content is loading from AJAX. In this example we have only a simple piece of text, but this could be a spinner, progress bar, or other image.

Hook into Reveal Open Event

Next what we need to do is add an open handler on the modal, which will notice when the modal is opened, load the content with AJAX, dump it into place, and resize the modal. Using JQuery, this becomes extremely simple. We bind to the Foundation triggered open.zf.reveal event, load the URL where our content lives using $.ajax, and once we have it, use the jQuery html() method to inject it in place. As one final step we trigger a resizeme.zf.reveal event, which tells Foundation that the reveal may need to be resized.

Check out the demo

Next Steps

That’s it! Now you can use jQuery AJAX to load content for a Reveal Modal. This is a simple example of jQuery Ajax, it also highlights jQuery’s power and simplicity in identifying areas of your webpages and making dynamic changes to them. This was part 2 of a 2 part series. In case you missed it, check out last week’s lesson to learn how to fetch the content before you show the modal.

This lesson is just a taste of the amazing topics you'll learn in our Advanced Foundation Class. If you're looking to be a Foundation expert, enroll in our Advanced Foundation Class and we'll help you achieve your goals.

Reserve your spot

About the instructor


Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.