How to display quiz using Magnific-popup with ajax
I am trying to implement the ability to download a quiz and display it in a lightbox with one click. I got all the ajax working and I think I am using Magnific-popup correctly, but the Lightbox is missing. Instead, all I can see is text left on the frame, with a dark background.
I have minified the jQuery code to at least need to duplicate the problem:
$('.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 goes dark and the words "Loading ..." appear, focus on the screen for a second, and disappear. The html then appears right on the dark background, left aligned and vertically centered. Besides the missing white background, there is no way out. Only refreshing the screen will bring it back to normal.
I have carefully read all the Stack Overflow questions tagged "Magnific-popup". Not sure what else I can do at this point.
Magnific works 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, HTML and jscript are already on the page. You can see how the inline version works here .
source to share
I am using MagnificPopup in the same way and it should work, looks like your problem is CSS related.
After 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>";
This should load the content using the same styles you have.
Hope it helps.
source to share
In the hope that it will be helpful to others, I want to answer the question asked in the title. After wrestling with this for a couple of weeks, I can safely say that (from a beginner's point of view) the documentation is vague and examples are few. So I want to write something that I would like to find earlier. To that end, here's how I integrated the Wordpress Slickquiz plugin with Magnific-popup.
Step one is to create a Slickquiz quiz and make sure it works correctly.
Step two is a jQuery script to call 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 Slickquiz requires two parts: javascript and HTML. So this code has to find the parts and combine them into one HTML.
Step 3 generates the CSS code specified in the previous step:
.quiz-popup {
position: relative;
background: #FFF;
padding: 20px;
width:auto;
max-width: 500px;
margin: 20px auto;
}
Step four, give the user something to click: a link containing the ajax url. I used a shortcode to implement it.
[ajax-quiz quiz-id='3']Start the Quiz[/ajax-quiz]
Step five is the shortcode handler that generates a clickable link containing the class selected by the Magnific-popup jQuery script application in the second step and the 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 an ajax request handler that emits js and html code that will be intercepted by the Magnific Popup script generated in the second step.
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;
}
What is it. You can see how it works here .
source to share