In the previous post, I walked through the process required to get WordPress modal dialogs to appear within the context of the administration area.
This uses:
- the built-in WordPress API,
- the provided Thickbox library,
- and some example code for getting it to display.
In this tutorial, I’ll walk through populating the modal dialog with data. After that, I’ll share how to populate the data dynamically using Ajax.
WordPress Modal Dialogs: Static Data
[restrict paid=”true”]
For this post, I’m assuming you’ve read the initial post in the series, and you have an understanding of what the code is doing (though it’s even better if you have some working code on your local development environment).
Regardless, let’s talk about populating the meta box with information. That is, we’ll look at:
- putting information in the body of the meta box,
- populating the title with content.
Once we have that done, we’ll move on to grabbing information from the server in an asynchronous nature and then populating the code we have thus far.
1. Defining The Data
Adding content to the meta box is really easy. Recall from the previous post; we have an HTML element that has a display: none; value for its style attribute.
Here’s the original gist:
Adding content to the modal dialog is easy. Just locate the element acme-modal-dialog and then populate it with whatever information you want to display to the user.
For example, see this code example:
When the user clicks on the anchor in the previous post (the one that reads Display The Dialog), then the modal will be displayed with the content that you see above.
Generally speaking, it should look like what you see above based on the code that’s outlined in the gist.
2. Setting a Title
Next, notice that the modal dialog includes an option to dismiss it whenever the user is done reading it. In addition to offering that ability, notice the area of the dialog has a lot of white space.
You know what I mean: It’s an area that’s usually relegated to being used as a title bar. Thanks to the Thickbox API and its integration with WordPress, we can easily add it our title. It can be dynamic (as if the information were to come via Ajax) or it can be static.
And since we’re working with static information in this particular post, let’s set that up. To do this, we need to add a title attribute to the anchor responsible for displaying the modal.
Once you locate the anchor responsible for triggering the display (remember, it contains the text Display The Dialog), add a title attribute to it so that the code looks like this:
Now, when you click on the anchor to trigger the display, it will not only show the dialog like in the shot above, but it will also contain a title:
Useful, right? But what if it were to be more dynamic?
Now On To Ajax
And the dynamic nature is what I’m looking to cover next. Specifically, I’m looking to walk through the process of taking what we have here, which is static data and replace it with information retrieved asynchronously.
That is, the user clicks on the Display The Dialog anchor and then:
- a request is made to the server,
- data is retrieved,
- and then the information is piped into the title and the content areas of the dialog.
It’s a bit better than using static information and makes for a more dynamic application.
[/restrict]
