MagnificPopup – Can’t load content

I have a script that perform an ajax request to a WordPress plugin. I need to retrieve the data from the plugin and show it in the magnific-popup popup.

Here the JS:

                    items: {
                        src: cp_eventi_calendario_officine.ajax_url
                    type: 'ajax',
                    ajax: {
                        settings: {
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                evento_id: eventId,
                                action: 'cp_officine_gestione_eventi_singolo_evento_calendario'
                        cursor: 'mfp-ajax-cur', // CSS class that will be added to body during the loading (adds "progress" cursor)
                        tError: 'Non è stato possibile caricare il contenuto richiesto.'
                    callbacks: {
                        parseAjax: function (mfpResponse) {
                   = $('#test-popup');
                         //   var eventoObj =;

                           /* var titleEl = $('#a').empty().html(eventoObj.titolo);
                            var contentEl = $('#b').empty().html(eventoObj.contenuto);
                            var dateEl = $('#c').empty().html(eventoObj.data_evento);*/
                        ajaxContentAdded: function() {
                            // Ajax content is loaded and appended to DOM

Docs says that the return must be html so this is what my plugin returns:

return "<div id="custom-content" class="white-popup-block" style="max-width:600px; margin: 20px auto;">
    <h1 class="test">HTML content, loaded via ajax</h1>
    #custom-content img {max-width: 100%;margin-bottom: 10px;}
    <p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.  These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. </p>
    <p>This is dummy copy. It's Greek to you. Unless, of course, you're Greek, in which case, it really makes no sense. Why, you can't even read it!  It is strictly for mock-ups. You may mock it up as strictly as you wish.</p>
    <img src="" />
    <img src="" />

In parseAjax callback I have added: = $('#test-popup');

so I have created a new div in my html with id="test-popup"

Now when I show the popup I see the gray background but nothing more.
What am I missing?

Read more here: MagnificPopup – Can’t load content

Leave a Reply

Your email address will not be published. Required fields are marked *