[Resolved] Bootstrap radio buttons with Ajax

[Author]

Posts

[katjaL]

I want to show Ajax radio button filtered search as Bootstrap buttons and active button should look a bit different. (Radio buttons are so 90's somehow, don't you think? That's why I wonder a little why it is so hard to show the buttons more modern way.)

Now I found this thread concerning CRED: https://toolset.com/forums/topic/bootstrap-radio-buttons/ and I've adjusted the code to my view with filtered search.

I'm almost there, but not quite 🙂 I need to add class .active to the chosen button and now when I choose a value it filters ok, and adds the .active class after "submit" ("Full page refresh when visitors click on the search button with input values auto-updating"), but not with Ajax ("AJAX results update when visitors change any filter values") .

At the moment I have this css:

.bootstrap-radio div {
font-size:30px;padding:0 15px 0 0px;margin-right:10px;
display:inline-block;background-color: #17984b;color:#fff;
border-radius:4px;
border:1px solid #fff;
cursor:pointer;
list-style:none;
}
.bootstrap-radio div input {display:none;}
.radio.active {background-color:#e77a6b;}

And this js

jQuery(document).ready(function( $ ){
$('.bootstrap-radio').find('input:checked').parents('div').addClass("active");
$('.bootstrap-radio').find('div').on('click',function(){
$('.bootstrap-radio').find('div').removeClass('active');
$(this).addClass('active');
});
});

[Minesh]

Hello. Thank you for contacting the Toolset support.

When you visit view's "Search and Pagination" section's JS box - you will see a button "Frontend Events". When you click it it will allow you to choose ajax callback events.

Refer this image:
=> hidden link

For example:

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
    */
        
jQuery('.bootstrap-radio').find('input:checked').parents('div').addClass("active");
jQuery('.bootstrap-radio').find('div').on('click',function(){
jQuery('.bootstrap-radio').find('div').removeClass('active');
jQuery(this).addClass('active');
       
});

What if you try to adjust the JS code you shared within this event and check if that help you to resolve your issue.

[katjaL]

My issue is resolved now. Thank you! For the reference the final js is this:

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
$('.bootstrap-radio').find('input:checked').parents('div').addClass("active");
$('.bootstrap-radio').find('div').on('click',function(){
$('.bootstrap-radio').find('div').removeClass('active');
$(this).addClass('active');
});
});

jQuery(document).ready(function( $ ){
$('.bootstrap-radio').find('input:checked').parents('div').addClass("active");
$('.bootstrap-radio').find('div').on('click',function(){
$('.bootstrap-radio').find('div').removeClass('active');
$(this).addClass('active');
});
});