after Ajax loading section with iframe fancybox links the fancybox does not open

Your Account / Forums / Easy FancyBox Pro / after Ajax loading section with iframe fancybox links the fancybox does not open

Tagged: ,

  • Author
    Posts
    • June 23, 2015 at 4:31 pm #5221

      Hi

      I use FancyBox for iframe links.

      They are in a section that displays initially, but will be reloaded after some ajax filtering is triggered.

      When the links are initially showed they work fine and open the iframe in FancyBox.

      But after the ajax loading of the links, they don’t work anymore.

      So I guess that the FancyBox action is not tied to the links (anymore).

      What JS function do I have to call after the ajax action to make the links open the iframe FancyBox?

      Thanks!

    • June 23, 2015 at 4:31 pm #5222

      Hi Andriu,

      To make FancyBox scan for (new or moved) links after an AJAX action you can simply trigger an event with the name “post-load” after new content has been added with

      
      jQuery(document).trigger('post-load');
      

      But make sure this event is triggered right after all new content is loaded into the DOM.

    • June 23, 2015 at 4:31 pm #5223

      Hi

      Thank you for your answer.

      I have tried this:

      $( “#wpv_control_select_filterstellenart” ).on( “onchange”, function() {
      jQuery(document).trigger(‘post-load’);
      });

      but it does not work as I get an error “Uncaught TypeError: $ is not a function”

      Can you please help me some more?

      Thanks!

    • June 23, 2015 at 4:31 pm #5224

      Replace that first $ there with jQuery.

    • June 23, 2015 at 4:31 pm #5225

      Hi

      Ok, the error is gone, but the binding does still not happen.

      Here is the page:

      http://jobmed.netsolution.ch/jobs/

      The link is “Details anzeigen” – this should show the FancyBox.

      Just click on the blue “Suchen” button – then the link will not work anymore.

      Maybe with looking at this you can tell me how to set up the JS for binding FancyBox.

      Thanks!

    • June 23, 2015 at 4:31 pm #5226

      That’s probably because the select field onchange event happens before the new content is loaded.

      What plugin is providing this form with ajax loading of new content? Is it WP Views? In that case I suppose the script http://jobmed.netsolution.ch/wp-content/plugins/wp-views/embedded/res/js/wpv-pagination-embedded.js is responsible for loading new content… And there are a few events triggered in there that might be useful.

      Like for example “js_event_wpv_pagination_completed” which could be used like this:

      
      <script type="text/javascript">
      jQuery( document ).on( 'js_event_wpv_pagination_completed', easy_fancybox_handler );
      </script>
      

      Nor really sure if that is the right trigger to hook on to but it’s worth a try 🙂

    • June 23, 2015 at 4:31 pm #5227

      Great, I was able to solve the filtering and paging by adding these two lines:

      jQuery( document ).on( ‘js_event_wpv_pagination_completed’, easy_fancybox_handler );
      jQuery( document ).on( ‘js_event_wpv_parametric_search_results_updated’, easy_fancybox_handler );

      Thanks again!

    • June 23, 2015 at 4:31 pm #5228

      And thank you for sharing your fix 🙂

  • You must be logged in to reply to this topic.