Magnific Popup Ajax parse div

Question

I´ve tried to implement from the documentation of the magnific popup how to retrieve only a specific div from an ajax call (http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type), but my expected response did not work. I´ve found out, that there is a misspelling in the documentation for this: ParseAjax and AjaxContentAdded are written in small letters. In the code it´s written in upper camel case. But this did not solve my problem.

 $('.JS_ajaxpopup').magnificPopup({
            type: 'ajax',
            ajax: {

                cursor: 'mfp-ajax-cur'
                tError: '<a href="%url%">The content</a> could not be loaded.'
            },
            callbacks: {
                ParseAjax: function(mfpResponse) {
                    console.log('test');
                    mfpResponse.data = $(mfpResponse.data).find('#mainContent');

                    console.log('Ajax content loaded:', mfpResponse.data);
                },
                AjaxContentAdded: function() {
                    // Ajax content is loaded and appended to DOM
                    console.log(this.content);
                }
            }
        });

Even my test did not appear in my console. Maybe somebody has a hint for my why I don´t get a response. The popup is opened correctly, but nothing is parsed. I´ve tried this one too:

 ParseAjax: function (mfpResponse) {

                    mfpResponse.data = "<div class='wrapping'>" + mfpResponse.data + "</div>";
                },
                AjaxContentAdded: function () {
                    this.content;
                }

Unfortunately nothing happened too.

Answer 1

Documentation states correctly, callback name should start from small letter (e.g. parseAjax).

Log in console what you get from $(mfpResponse.data).find('#mainContent'). If #mainContent is root element, use filter instead of find.