Réinitialise magnific popup after a filtering operation

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user has built a custom light box using a view, but the lightbox does not work after filtering the view.

Solution:
The user has activated AJAX on the view, after the first-page load, any further AJAX calls will not rebuild the lightbox. The lightbox needs to be built when AJAX calls finish. Check this example custom code:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated ready', function() {
    activatePopup();
 
  function activatePopup() {
    jQuery('.popup-link').magnificPopup({
      type:'image'
    });
  }
});

This support ticket is created 4 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

Tagged: Custom search, Views plugin

This topic contains 5 replies, has 2 voices.

Last updated by ericK-4 4 years, 1 month ago.

Assisted by: Jamal.

Author

Posts

October 13, 2020 at 5:05 pm #1810525

ericK-4

Making a lightbox. It works but after a new filtering operation it doesn't work. It is here
hidden link
I read that we need to reinitialize the js. I find this code for search and filter. What is the class for toolset ?

jQuery(window).load(function(){
activatePopup();
// Plugin callback function
jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function(){
activatePopup();
});
function activatePopup() {
jQuery('.popup-link').magnificPopup({
type:'image'
});
}
});

And please don't give up the views 🙁

October 14, 2020 at 9:01 am #1810977

Jamal

Hello Eric and thank you for contacting the Toolset support.

Toolset does expose some Javascript events after all of its AJAX operations(filtering, pagination, etc.) that you can use to initialize the lightbox. Check this screenshot for the available events hidden link
You are looking for the event that will fire when the results of your filtering/search finishes, check this screenshot hidden link
A sample code would be:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	activatePopup();
});

I hope this helps. Let me know if you have any questions.

October 14, 2020 at 11:11 am #1811073

ericK-4

Hi,
Thanks for your answer
I put this lines in Front end events panel and it doesn't work

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
activatePopup();
});
function activatePopup() {
jQuery('.popup-link').magnificPopup({
type:'image'
});
}
});
Thanks for your support

October 14, 2020 at 12:13 pm #1811137

Jamal

Would you allow me temporary access to check this issue further? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

October 14, 2020 at 3:06 pm #1811337

Jamal

There was an error in the copied code. It needs to remove one of the 3rd or last lines. Check this screenshot hidden link

I have also added the "ready" event to initialize the lightbox on the first page load.

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated ready', function() {
    activatePopup();

  function activatePopup() {
    jQuery('.popup-link').magnificPopup({
      type:'image'
    });
  }
});

October 14, 2020 at 3:57 pm #1811393

ericK-4

My issue is resolved now. Thank you!