[Resolved] I want to add CSS class to AJAX filter, but the class is deleted when the results are updated

[Author]

Posts

[Junichiro Taira]

I created this with view plugin.
As you can see, there is a filter and view template section (AJAX).

I want to change color when the viewer selected a radio button like the attached image. However, AJAX reloads filter section and can not be added custom class.

Here is JS I added.

jQuery(document).ready(function($){
$(document).on('click','.wpv-filter-form .radio', function(){
$('.radio').removeClass('active');
$(this).addClass('active');
});
});

Would you help me?

[Christian Cox]

Hi, you can use the Frontend events button in the JS panel under the Search and Pagination editor to create event hooks for search events and pagination events, including search form updates and search results updates. You can call your own JavaScript within the event hook callbacks as needed.

[Junichiro Taira]

Sorry. I've never used this. Would you teach me how to do it?

[Christian Cox]

Depending on how your View is set up, you may need to use more than one event listener to achieve the effect you're looking for. Click the button, then select the event. The system will create a code template with an event listener already set up for you, something 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
	*/
	
});

Inside the callback function, you can add your own custom code to be executed when the event is triggered. You should use the namespace jQuery instead of $ inside your callback function. The comments inside the callback describe a few of the important attributes of the callback parameters that are available to you.

[Junichiro Taira]

My issue is resolved now. Thank you!