0

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.

10
  • I think this is duplicate of the previous question - stackoverflow.com/questions/47386229/…
    – Janis
    Nov 21, 2017 at 6:34
  • I was so excited when I saw your note and link because I had missed that one, but alas, twas not to be. I tried applying that selector logic and it still does not work. This is what I did: ` $().fancybox({ selector : 'a.itemShow', scrolling : 'no', titleShow : false }); ` I tried it with many different options. Nov 21, 2017 at 23:01
  • Sorry about the formatting above. I forgot to indent the code 4 spaces. Nov 21, 2017 at 23:12
  • @Janis - I did find a question that involved a pre-version-2 fancybox and the solution was this: After loading the dynamic content, bind the fancy box again. It was also mentioned that upgrading to V2 would solve it. I am wondering if this is an option in V3 or removed. I have no idea how to rebind the div to even try it, let alone know if it is relevant. Nov 21, 2017 at 23:19
  • I already explained in that previous question - jQuery v3 removed one feature that allowed to automatically create delegated click events. Therefore this stopped working for v2 and v3 uses this new syntax. So, if you are using v2, then simply call $(".itemShow").fancybox() after appending new elements to the page.
    – Janis
    Nov 22, 2017 at 6:32

1 Answer 1

0

Solved. Thanks to @Janis for pointing me in the correct direction.

The reason that the jQuery segment did not work was apparently because it needed to be placed in 3 different places for everything to work. This may be only because of the WordPress plugin selected. It had to be in the plugin as I described in my question plus in two places in the jQuery that I suspected to be my problem. That code now appears like this:

jQuery(document).ready( function($) {

    $(".itemShow").fancybox({
        'scrolling'     : 'no',
        'titleShow'     : false
    });

    $('#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>' );
                            }
                            $(".itemShow").fancybox({
                                'scrolling'     : 'no',
                                'titleShow'     : false
                            });

                        },
            error:      function ( errorThrown ) {
                            alert('error running');
                            alert("Error thrown: " + errorThrown);
                        }               });
        });         
    });

Notice the new jQuery in both the success section and directly after the ready.

Enjoy! And thanks again @Janis for your patience and help!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.