Nice and easy AJAX for Wordpress

So in this post I am going to describe the basics of creating a nice easy AJAX modal window in a WordPress site.

When I first started playing around with AJAX I found it quite difficult to achieve something that sounded like it should have been relatively simple: I just wanted to load some content from another page into a modal (popup) window (a bit like how my contact form works on this site).

This confused and generally frustrated me, so to save time I always just left the idea and relied on a modal window plugin to do the hard work. What I want to show you is that this IS actually really simple to achieve.

There are a few main steps to this:

We have to create the page that we are going to load into our modal window by AJAX. We want our users (and Google) to find the page that will be popping up in the modal, even if they don’t get to it via AJAX (for example, if for some strange reason they don’t have javascript enabled on their browser, although why this would happen in 2017 is beyond me).
When the new page is published we need to go to another page and add a link which, when clicked, will open the modal window.
We will add some extra HTML markup to our page into which the content for the modal window will be loaded.
This HTML will have some CSS to actually make our modal window look like a modal window…
Finally, we will add some javascript (in this case jQuery and AJAX) to grab the page content.

Let’s go!

So we start by making out page in the WordPress admin. Remember that this can be used to load any content you want (in theory) but let’s keep it simple to start with and just grab the main article content from another page.

I suggest just creating a page with a title and some content. Done?

Link to the new page

Then, we go another page and create our link to the new page we have just created. Do this like any other link you might add. At the moment, clicking on this will take you directly to the page, but don’t worry – by the time we are finished, this link will open our modal window.

Just one extra little thing you need to do – once your link has been created, switch to the WordPress text editor view and find your new link. Give it a class like so:


class="open-modal"

Adding HTML for our modal window

The modal window can be kept pretty simple and just needs a few lines of code added. I usually always put this code in the footer.php of my page templates. This keeps it out of the way of main content (so search engines and screen readers don’t get confused) and also means that the basic modal window code is present on every page and ready to be filled with content.

The code I am using is as follows:


<div class="overlay-bg"></div>
<div class="overlay-window">
 <span class="ajax-loader"></span>
<div id="load-content">
</div>
 <a href="#" class="close">Close</a>
</div>

There are a couple of things worth pointing out here I think: the overlay-bg is going to act as a background, the ajax-loader will be revealed and hidden as it’s needed to show the page is working, the close link will give a cue for the user to close the window, and finally the load-content which is where our content will go.

At the moment, this looks like nothing on the page – just the word ‘close’ hanging around at the bottom, looking like something it broken on your page. Time to style it…

Styling our window

There is a bit of CSS needed to make our window look nice. I always do the CSS before the JS stuff so the content visible on the page to work with – but we’ll have to remember to make it invisible before releasing it into the wild…

.overlay-bg {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 45;
 background-color: rgba(0, 0, 0, 0.7);
}

This will give us a dark, semi-transparent background which completely covers the screen. Now we need to add our content box…


.overlay-window {
position: fixed;
z-index: 46;
width: 400px;
left: 50%;
margin-left: -200px;
top: 150px;
padding: 20px;
}

Now we have our content box, we need to style the close button…


.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 14px;
}

Obviously, you can change these values to position the close button whereever you like. But I like to have it on the top-right, generally.

Almost there… Once we’re happy with how it looks, we need to revisit both the overlay-bg and overlay-window CSS and add display:none; to hide them from the screen.

Now for the AJAX fun

This bit sounds harder than it is. We are literally going to send a post request which will look for a specific element on a specific page URL. This can be passed from the link that we click on to open the modal window (so even if the user does not have javascript enabled, they will just get taken directly to the page, rather than seeing a modal window).

Here’s a breakdown of my code…


$('a.open-modal').on( 'click', function() {
event.preventDefault();

When a user clicks on a link with a class open-modal, we must prevent the default link action (i.e. going to the page)


$('.overlay-bg').fadeIn();
$('.overlay-window').fadeIn();
$('.overlay-window .ajax-loader').fadeIn();
var pageToLoad = $(this).attr("href");

We fade in the overlay-bg, and the overlay-window, AND the ajax-loader. At the same time, we grab the URL from the link that was clicked on, and put it into a variable called pageToLoad. Now comes the AJAX bit…


$.ajax({
url: pageToLoad,
success: function( data ) {

var pagecontent = $(data).find('.content-wrapper');
$('.overlay-window .ajax-loader').fadeOut();
$('#load-content').html(pagecontent).fadeIn( slow , function() {
// Done!
});
}
});

What’s happening here? First, we are creating an AJAX object, and into that we are passing the URL that we want to load. That’s it! The success function then goes on to say what will happen once the AJAX has gone and found the page successfully. And in this case, here’s what happens:

We find a div with the class content-wrapper and grab the HTML from inside that – Note: this is just and example, and could be any div on the page you want to load into the modal window. We put all this HTML content into a variable pagecontent.
Now, we are ready to display it, so first I have faded out the ajax-loader.
Then I slowly(!) fade in the pagecontent, and drop it into the load-content div in our modal window using jQuery’s html.

Of course, we also need to close the window, but this is not too difficult:


$(document).on('click', '.close, .overlay-bg', function(event){
$('.overlay-bg').fadeOut('fast');
$('.overlay-window').fadeOut('fast', function() {
$('#load-content').empty();
});
});

So, when the user clicks on either the close link or the dark background, both the dark overlay and the overlay window fade out quickly, and once that has completed, the content in the window (i.e. load-content div) will disappear using jQuery empty. This needs to happen otherwise the content would stay there until the next time the window opens, and then two lots of content would show up.

That’s it!

And there you have it – You can now load content from any page into a modal window, as long as you give the link you are clicking on has a class of open-modal attached to it.

Nice and easy AJAX for WordPress