5

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.

1 Answers1

2

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.

Gestudio Cloud
  • 290
  • 2
  • 12
  • Thank you for your reply! It was my own stupid mistake to not test it on a (local) server first. Didn't know about AJAX not working without a (local) server. Kind of embarrassing, lesson learned. –  Oct 31 '13 at 15:34
  • ajax does not need any http server, it can work requesting local files. You can check it downloading any modal window package with demos, there is always a demo using ajax with relative local urls. ;) – Gestudio Cloud Feb 18 '14 at 10:53