How to display quiz using Magnific-popup with ajax

Question

I am attempting to implement the ability to download a quiz, and display it in a lightbox, with a single mouse click. I got all the ajax stuff working, and I think am using Magnific-popup correctly, but the "lightbox" is missing. Instead all I see is the text, left justified, on the dark background.

I reduced the jQuery code to be the minimum necessary to duplicate the issue:

$('.els-ajax-popup').magnificPopup({ 
    type:'ajax',
    callbacks: {
        parseAjax: function (ajaxResponse) { 
            ajaxResponse.data = "<div class='wrapper'><p>this is a test</p></div>";
        }
    }
});

And my html looks like this

<a class = "els-ajax-popup" href="http://sandbox.somewhere.net/wp-admin/admin-ajax.php?action=els_quiz_ajax&quiz_id=3" >Quiz</a>

Current behavior: After clicking the link, the screen turns dark and the words "Loading ..." appear, centered on the screen for a second and vanish. Then the html appears, directly on the dark background, left-justified and centered vertically. In addition the the missing white background, there is no way to exit. Only a screen refresh will return it to normal.

I carefully read all of the stack overflow questions tagged with "Magnific-popup". Not sure what else I can do at this point.

Magnific is working great for me in "inline" mode.

$('a.open-quiz-popup').magnificPopup({ 
    type:'inline',
    midClick: true, // allow opening popup on middle mouse click.
});

In this case, the HTML and jscript are already in the page. You can see how the inline version works here.

score 2 · Accepted Answer · answered Oct 30 '14 at 12:48

2

I'm using MagnificPopup in the same way and it should work, looks to me like your problem is related to the CSS.

Looking at your page, maybe try this:

ajaxResponse.data = "<div id='test-popup4' class='quiz-popup'>" +
      "<div class='wrapper'><p>this is a test</p></div>" +
      "<button class='mfp-close' type='button' title='Close (Esc)'>×</button>" +
      "</div>";

That should load the content applying the same styles you currently have.

Hope this helps.

answered Oct 30 '14 at 12:48

LoopBit

46
2

Brilliant observation! The problem was that I omitted `class='quiz-popup'`. I totally forgot that I lifted that styling from one of the Magnific-popup demos (several months ago). – Eric Laoshi Oct 30 '14 at 17:51

Eric Laoshi · Answer 2 · 2014-12-08T23:20:34.000

In the hopes that it will be helpful to others, I want to answer the question posed in the title. After struggling with this for a couple weeks, I can safely say that (from the perspective of a novice) the documentation is vague and the examples are scarce. So I want to write something I wish I could have found earlier. To that end, here is how I integrated the Slickquiz wordpress plugin with Magnific-popup.

Step One is to create a Slickquiz quiz and verify that it is working properly.

Step Two is a jQuery script to invoke Magnific-popup, parse the ajax output and display the quiz

$('.els-ajax-popup').magnificPopup({ 
    type:'ajax',
    midClick: true, // allow opening popup on middle mouse click.
    callbacks: {
        parseAjax: function (ajaxResponse) { 
            ajaxResponse.data = parseAjax( ajaxResponse.data );
        }
    }
});

function parseAjax (data) {
    var dom = $('<html>').html(data);
    var quiz_html = $('.quiz-wrapper', dom).html(); 
    var script_html = '';
    $('script', dom).each(function(){
        var script = $(this).text();
        if (script.indexOf("slickQuiz") > -1) {
            script_html = '<div style="display:none"><script>' + script + '</script></div>';
        }
    });
    return "<div class='quiz-popup'>" + quiz_html + script_html + "</div>";
}

Note: parsing is complicated by the fact that the Slickquiz requires two parts, the javascript and HTML. So this code must find the parts and merge them into a single HTML.

Step Three creates the CSS code referenced in the previous step:

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

Step Four, give user something to click on: a link containing the ajax url. I used a shortcode to implement this.

[ajax-quiz quiz-id='3']Start the Quiz[/ajax-quiz]

Step Five is the shortcode handler that generates the clickable link containing the class selected by the Magnific-popup jQuery script in Step Two, and parameters to be passed to the ajax handler.

add_shortcode('els-ajax-popup', 'mfp_ajax');
function mfp_ajax($atts, $content) {
    extract( shortcode_atts( array('quiz_id' => '0'), $atts ) );
    $link = admin_url('admin-ajax.php?action=els_quiz_ajax&quiz_id='.$atts['quiz_id']);
    return  '<a class="els-ajax-popup" href="' . $link . '" >'.$content.'</a>';
}

Step Six, write the ajax request handler that emits the js and html code to be intercepted by Magnific Popup script created in Step Two.

add_action('wp_ajax_nopriv_els_quiz_ajax', 'els_quiz_ajax');
add_action('wp_ajax_els_quiz_ajax', 'els_quiz_ajax');
function els_quiz_ajax() {
    $quiz_id = absint( $_REQUEST['quiz_id'] );
    $quiz = do_shortcode ("[slickquiz id=$quiz_id]");
    echo '<html><div class="quiz-wrapper mfp-hide">'.$quiz.'</div>';
    apply_filters ("wp_footer", ""); // output of wp_footer echoed by filters
    echo '</html>';
    die;
}

That's it. You can see it working here.

How to display quiz using Magnific-popup with ajax

2 Answers2