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

Home › Forums › Easy FancyBox Pro › after Ajax loading section with iframe fancybox links the fancybox does not open

Tagged: ,

This topic contains 7 replies, has 2 voices, and was last updated by  RavanH 3 years, 7 months ago.

  • Author
    Posts
  • 23 June 2015 at 16:31 #5221

    Andriu
    Participant

    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!

  • 23 June 2015 at 16:45 #5222

    RavanH
    Keymaster

    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.

  • 23 June 2015 at 17:36 #5223

    Andriu
    Participant

    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!

  • 23 June 2015 at 18:11 #5224

    RavanH
    Keymaster

    Replace that first $ there with jQuery.

  • 23 June 2015 at 18:16 #5225

    Andriu
    Participant

    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!

  • 23 June 2015 at 19:00 #5226

    RavanH
    Keymaster

    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 🙂

  • 23 June 2015 at 21:58 #5227

    Andriu
    Participant

    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!

  • 23 June 2015 at 23:46 #5228

    RavanH
    Keymaster

    And thank you for sharing your fix 🙂

  • Author
    Posts

You must be logged in to reply to this topic.