Hello. I did my best to find an answer in the forums, but could not solve this problem.
I am trying to: Create pop-up help for various fields in a view using the Popup Builder plugin.
I visited this URL: hidden link
I expected to see: On that View I created a slider with a small help button that is supposed to trigger a pop-up window with more information. It works perfectly when the page first loads.
Instead, I got: After advancing to the next slide by clicking 'Next', the slide advances, but then the pop-up stops working.
Here is the code I have in the view - template section:
Can you please help me solve this problem? Is there some other way to approach this that would be cleaner? Unfortunately, I'm not very technical which is why I hoped to use the Pop-up Builder plug-in for this solution.
This is because the Plugin you use is not delegating the functions (JS) when an AJAX call (from views pagination) triggers.
So this will work on first page load, but not when a page is paginated by AJAX.
We provide some hooks, that you can use to re-initiate the Plugin's functions after pagiantion.
They are visible in the HTML Filter Editor, in the JS Edit area
There you will find a Button "Front End Events"
Click on that and you will see all possible Hooks. In your case I would suggest " The AJAX pagination has been completed "
When you insert that Hook, you will see a JS Function in the Editor, that you can fill out with the Custom Function that your Plugin uses to pop up the messages.
This requires you to know those functions, something I can not help with, but the Plugin author should know what function calls the PopUp (initiates it)
So you can then cal this function back with our Hooks
Unfortunately, I was unable to get a response from the plugin author, nor find a clear answer in their forums. I am not really a developer - only know basic html and css - but I really need to get this working.
There they talk about a workaround to create a PopUp with a traditional Link.
You may try to use the Function they suggest in our JS Hook:
popupObj.showPopup(i, false);
You need to ask this Plugin's developer, what is the Function that initiates the PopUp JS Function.
There must be one, and they should know it.
This will then help you to delegate the action on AJAX Load.
This is not something we can fix on our end unfortunately, but we provide this nice JS Hooks that help you delegate and re-initiate any JS Function of other Software on AJAX load.
I was able to get it working on this page: hidden link
But for some reason, it won't work on another page: hidden link
Here is the JS I added that made it work on the messages page:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/* Initialize Popup Builder Plugin for Help pop-ups */
SGPopup.prototype.init();
});
I pasted the exact same code on the audience page, but the original problem occurs. It works fine on initial page load, but then after the view is refreshed using the AJAX filter, the popups stop working.
Beda is on vacation and I have taken on this thread.
On your audience page you have a custom search which is updating the results via ajax rather than pagination updating the results via ajax as per your messages page.
So on the audience page the JS front-end pagination event isn't being triggered.
For that page you need a custom search front-end event (which you can access via the same button described by Beda), and the event you will need is js_event_wpv_parametric_search_results_updated which triggers when the page updates after changing search filters.
