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

Tagged: ajax, WP Views

This topic has 7 replies, 2 voices, and was last updated 7 years, 11 months ago by Rolf.

Viewing 7 reply threads

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
  Rolf
  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
  
  Rolf
  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
  Rolf
  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
  
  Rolf
  Keymaster
  
  And thank you for sharing your fix 🙂
Author

Posts

Viewing 7 reply threads

You must be logged in to reply to this topic.