This thread is resolved. Here is a description of the problem and solution.
Problem: I have implemented the select2.js library and replaced the select filters in my custom search View with select2 elements. After submitting search filters, Views updates the results using AJAX and the select2.js filters are replaced with default select fields. I would like to reinitialize the select2 filters after an AJAX update in the View.
Solution: Views search filters are replaced during AJAX result updates, so any customizations you perform to the filters must be reapplied after an AJAX update. In the legacy Views editor, you can use the Front-end Events button in the Search and Pagination editor area to insert event hook templates for various events available in the Views and Maps systems. Use the search results updated event hook to trigger custom JavaScript code that reinitializes the select2.js elements in custom search filters. The event hook callback template looks like this:
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
// Add your own custom JavaScript here to initialize the select2 element again
});
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 |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 3 replies, has 2 voices.
Last updated by 3 years, 8 months ago.
Assisted by: Christian Cox.
Hello, there are some front-end event hooks provided by Views that can help here. You can use the different event hooks to trigger your own custom code at specific times during the Views lifecycle. If you're using the legacy View editor to create this search View, you can find a button "Front-end events" in the JS editor panel in the Search and Pagination section of the View editor screen. I'm attaching a screenshot here showing the button.
The event hook "The custom search results have been updated" will be triggered after search has occurred, and the filters have been replaced. You can use the Front-end Events button to insert an event hook for this event, as in the following template:
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
// Add your own custom JavaScript here to initialize the select2 element again
});
Add your select2 initialization code inside the callback function to reinitialize the select2 element after the filters are reloaded.
