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:

$.magnificPopup.open({
                    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) {
                            mfpResponse.data = $(mfpResponse.data).find('#test-popup');
                         //   var eventoObj = mfpResponse.data.data.message;


                           /* 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
                            console.log(this.content);
                        }
                    }
                });

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>
    <style>
    #custom-content img {max-width: 100%;margin-bottom: 10px;}
    </style>
    <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="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" />
    <img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" />
</div>";

In parseAjax callback I have added:

mfpResponse.data = $(mfpResponse.data).find('#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


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: