Topic Tag: Views plugin

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
});