[Closed] Views – Reverts to original state after search / pagination update

[Author]

Posts

[Paul Marconi]

Hi there,

We are using the Toolset Views (Version 3.6.15) plugin to create a search filter. The filter is working, but there is an issue with my toggle buttons after search or pagination updates.

I have added custom js codes, which is to toggle between 2 different layouts:
1) list view or
2) grid view

There are 2 buttons at the top of the search result area (screenshots attached).
The list layout is set to default.

When I toggle between these 2 layouts it works, but after clicking the load more button (at the bottom) or updating the filters (on the left), it reverts to original state.

Example:
I selected the 'grid' button, the layout changed to a grid layout, which is great. However, once I've clicked the load more button or update the filters, it reverts back to the 'list' layout.

I've added my custom JS code in the 'Loop Editor' section, and I added these events below to make my custom code work after search or pagination updates:
js_event_wpv_parametric_search_results_updated
js_event_wpv_pagination_completed

HTML code:

<div id="news_listing">
<div class="listing-button-group">
<button class="btn active" data-view="list-view">List</button>
<button class="btn" data-view="grid-2up">Card</button>
</div>
[wpv-layout-start]
[wpv-items-found]
<div class="listing has-multicolumns listing_cards listing_resources listing_item_found_[wpv-found-count]" data-view="list-view">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="loop-item-in-resource-listing-with-search-filters-v2"]
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
<p class="view-listing-no-item-found has-text-color has-text-color-black has-white-background-color">[wpml-string context="wpv-views" name="Resource listing with search filters - no results"]No resources found[/wpml-string]</p>
[/wpv-no-items-found]
<div class="load-more__posts text__aligncenter">[wpv-pagination][wpv-pager-next-page force="true"][wpml-string context="wpv-views" name="Resource listing with search filters - load more button text"]Load More[/wpml-string][/wpv-pager-next-page][/wpv-pagination]</div>
[wpv-layout-end]
</div>

========
JS code:

(function ($) {

function setViewType(){

var $buttons =$('.listing-button-group .btn');
var $listingContainer = $('.listing');

$('.listing-button-group .btn').click(function(e) {
e.preventDefault();
var viewType = $(this).data("view");

/*button*/
if($(e.target).is('.active')) {
//$('.listing-button-group .btn').removeClass('active');
}else {
$('.listing-button-group .btn').removeClass('active');
$(this).addClass('active');
}

/*listing container*/
$listingContainer.attr('data-view', viewType);

});

}

$(document).ready(function () {
$('.js-wpv-layout-infinite-scrolling').removeClass('js-wpv-layout-infinite-scrolling');
setViewType();
});

/*after update*/
$( document ).on( 'js_event_wpv_parametric_search_results_updated', function(event, data) {
setViewType();
$('html, body').animate({ scrollTop: jQuery("#news_listing").offset().top - 100 }, 'slow');

});

$(document).on( 'js_event_wpv_pagination_completed', function(event, data) {
setViewType();
});

})(jQuery);

my js code is to add the classname 'active' to the selected button, then it grabs the 'data-view' value from the selected button.
That 'data-view' value is added to the 'listing' div under the 'data-view' attribute.

It's working, but once the load more button is clicked or when the filters are updated, it reverts back to the default layout, which is the list view.

What is the issue?
How can I save the chosen layout, so it keeps that layout after search or pagination updates?

Thank you!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Please check the following Doc and try to add the JavaScript callback events for pagination and search:
- https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

For example:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
     //// your custom js code goes here
});
 
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
    //// your custom js code goes here
});

[Paul Marconi]

Thanks for responding back to me! If you look in my previous message, I pasted in my js code and I did added the 2 events:
js_event_wpv_parametric_search_results_updated
js_event_wpv_pagination_completed

It still doesn't work.
What is the issue?

[Minesh]

Ok can you please share problem URL and admin access details.

Please note that I can check this issue but do not guarantee that I will have solution for this as its a custom code.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.