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

Tagged: ajax, WP Views

This topic contains 7 replies, has 2 voices, and was last updated by RavanH 3 years, 10 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.