Product Design Lessons

Intro to Foundation  |   Lesson #126

AJAXing Dynamic Content with Foundation

Load Dynamic AJAX Content into Foundation’s Reveal Modal


It’s very common in web development for designers and developers to dynamically update a web page's Document Object Model (DOM) and change its structure and content as needed. 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.

There’s lots of uses for AJAX loading in a website. For example, let’s assume you have stored page contents in database. You can display page titles as a header menu on top the content area. Or by clicking the menu, you can call a jQuery function to send an AJAX request to get page content from database. In this lesson, we’ll cover how to set up a Reveal modal with content that we have to fetch using AJAX.

Let’s dig into the basics of using jQuery to load AJAX content into the Foundation Reveal Modal.

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 1 of a 2 part series. This week we’ll go through how to load the content first, and next week we’ll cover how to open the modal with a loading screen.

Using AJAX to load dynamic content into the modal before 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. For the first example, where we’re loading the content first before we show the modal, it looks like this:

You’ll notice one thing immediately that is different about this setup from the way a basic reveal dialog. The trigger isn’t using a data-open attribute to point to the reveal. This is because we’re going to be triggering the Reveal using JavaScript. Because of this, we'll instead add a unique id to the button to let us hook into it with JavaScript.

2. Trigger the button via JavaScript

Next what we need to do is add a click handler on the button, which will load the content for your modal with AJAX, dump it into place, and open the modal. Using jQuery, this becomes extremely simple. We just load the URL where our content lives using $.ajax, and once we have it use the jQuery html() method to inject it in place. Foundation already knows that the container #reveal1 is a reveal modal, so once the content is there we can open it by calling foundation(‘open’)).

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. Next week, we’ll dive into another method for loading content with AJAX into reveal modal after it has already opened, allowing you to do more complex loading states or even change a modal every time it is opened.

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.

About the instructor


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