How to load another HTML file in Magnific Popup with the AJAX function?

Question

How do I load another HTML file (on the same server) in a Magnific Popup, AJAX type? I looked at the source code of http://dimsemenov.com/plugins/magnific-popup/ but I can't get it to work. Other popup types are working fine, such as images, video's and iframes. I'm probably missing some important AJAX codes? After clicking the link, the popup shows the text 'Loading...' and doesn't load the HTML file.

Here's the simplified code so far.

<a href="ajax.html" class="popup-ajax">Open ajax</a>

JS:

$('.popup-ajax').magnificPopup({
    type: 'ajax'
});

ajax.html file:

<div id="ajax-content" class="example-popup">
    <p>Content</p>
</div>

CSS for the ajax file / popup:

.example-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

I don't have any knowledge of AJAX, so a sample code would be very helpful. Any help would be appreciated. Thanks!

Edit: Didn't know that AJAX doesn't work without a (local) server. This is kind of awkward but I'll leave this message up for others who'll make the same mistake.

Answer 1

That's the way, you are doing it correctly. If still can't get it, check that the class is correct and the js files loaded.

Check also the error console, if you have any JS errors before it won't work.