I am writing a plugin (I have written many) and decided to try Fancybox for the first time to display png images in a popup. The plugin works well for the html that is initially part of the initial page render, but identical html that I return from an ajax call does not result in a popup and does not throw errors.
My question is this: When the html is injected into a div as the result of an ajax call, is it still possible to use Fancybox and Thickbox for popups? If so, what is wrong here?
This is how I create the html in the ajax call:
$html = "
<div class='skTable'>
<div class='skTableHeading'>
<div class='skTableHead skQtyColumn'>#</div>
<div class='skTableHead skNameColumn'>Name</div>
<div class='skTableHead skImgColumn'>Image</div>
</div>
<div class='skTableBody'>";
foreach ( $itemList as $item ) {
$html .= "
<div class='skTableRow'>
<div class='skTableCell skQtyColumn'>$item->quantity</div>
<div class='skTableCell skNameColumn'>$item->itemName</div>
<div class='skTableCell skImgColumn'>
<div style='display:none'>
<div id='$item->itemCode-$item->itemNumber' style='width:245px;height:342px;'>
<img width='245' height='342' src='$item->imageUrl'>
</div>
</div>
<a class='itemShow' href='#$item->itemCode-$card->itemNumber'>View</a>
</div>
</div>";
}
$html .= "
</div>
</div>";
$results['html'] = $html;
$results['success'] = TRUE;
The exact same code is used for the html that renders the initial page - and again the initial render works but the html from the ajax call does not.
I suspect that the problem is in my jQuery which is in a separate file:
jQuery(document).ready( function($) {
$('#ChoiceID').on( 'change', function () {
var valueSelect = $(this).val();
var ajaxurl = plugin_vars.ajax_url;
var ajax_nonce = plugin_vars.ajax_nonce;
$.ajax(ajaxurl, {
type: "POST",
dataType: 'json',
data: {
action: "getChoiceResult",
security: plugin_vars.ajax_nonce,
userChoice: valueSelect
},
success: function ( results ) {
var returnedHTML = results.html;
if ( results.success ) {
$('#ChoiceResult').html( returnedHTML );
} else {
$('#ChoiceResult').html( '<span>No results available: ' + valueSelect + '</span>' );
}
},
error: function ( errorThrown ) {
alert('error running');
alert("Error thrown: " + errorThrown);
} });
});
});
The initial render also contains this relevant html which kicks off the ajax call and provides a location to place the result:
<div class="skTableCell">
<form action="" id="plugin_form">
<div class="skTable">
<div class="skTableRow">
<div class="skTableCell">
<label for="UserChoice" class="skLabel">Make a choice:</label>
</div>
<div class="skTableCell">
<select name="UserChoice" id="ChoiceID" class="skSelect">
<option value="NonChoice">--- Choose a deck! ---</option>
<option value='Choice1'>Choice 1</option>
<option value='Choice2'>Choice 2</option>
<option value='Choice3'>Choice 3</option>
</select>
</div>
</div>
</div>
</form>
</div>
<br/><br/>
<!-- where the response will be displayed -->
<div id="ChoiceResult"></div>
The Fancybox Settings in Wordpress have Extra Calls checked with these set up to add to the Fancybox jQuery:
jQuery(".itemShow").fancybox({
'scrolling' : 'no',
'titleShow' : false
});
jQuery(".modal").fancybox({ // for modals pages
'autoSize' : true,
'type' : 'ajax'
});
jQuery("#zoom").fancybox({ // for modal images
'autoScale' : true,
'transitionIn' : 'fade',
'transitionOut' : 'fade'
});
The CSS that I enqueue is simply formatting and not relevant.
That is all I can think of to include, but please do not hesitate to ask for more. The Error Log is unremarkable and the browser console does not report any errors. When clicking on the View links in the initial render, the Fancybox popup shows (as does a thickbox when I tried that) - but the html that is injected into the ChoiceResult div as a result of the ajax call does not on either Fancybox or the built-in thickbox.
Thanks in advance for any light that anyone can shed.