[Resolved] View: Clear filters on "Select multiple" field error

[Author]

Posts

[leilaG-2]

Hello,

I have 3 'Select Multiple" fields when I click 'Clear filters' the first option gets stuck in the select box and you're not able to change it.
And when I click a link from the results it reloads the same page, not sure if it's a connected issue.

[leilaG-2]

Ignore this part:
And when I click a link from the results it reloads the same page, not sure if it's a connected issue.
I had the 'Usage' checkbox ticked by mistake

Select Multiple Clear filters issue still there

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Can you please share the link to the page where this multi-select field can be seen?

regards,
Waqar

[leilaG-2]

Hey Waqar,

The site is still private - hidden link

Could you open the reply for login details. Thanks

[Waqar]

Sure, I'm setting your next reply as private.

Note: Making a complete backup copy is recommended before sharing the access details.

[Waqar]

Thank you for sharing the access details.

During troubleshooting, I noticed that your website includes some additional script to style the multi-select type fields, look like a text field, with input blocks for the selected options. This feature or script is not included in the Toolset plugins and most probably coming from the active theme.

That part of the script is designed to work when the page loads, but not if the page's content are updated through AJAX.
( like when search form fields or pagination is used, without reloading the page )

As a quick fix, you can adjust the view's search settings, so that it doesn't use AJAX and uses page reload/refresh.

Do you recall adding any custom script or third-party plugin for this feature? If not, I'll recommend, getting in touch with the 'JNews' theme's support, to get more information about this feature/script. If they could point out the exact function or part of the script, we can assist you with some custom script, to reinitialize it, when the AJAX for the search or pagination is completed.

[leilaG-2]

Hey Waqar,

I tried switching to the default theme, but it displays the Multi options as an old style full list without the Type and search function.

From Jnews support:

We think that this issue is not due to the script from our theme. When you click the Clear All Filter button, it triggers an Ajax request to the endpoint admin-ajax.php and returns the updated filter and product elements. However, all Ajax requests in the JNews front end use a different endpoint, ajax-request=jnews.

hidden link

hidden link

If this issue were caused by a script in the JNews theme that alters those elements, it should occur when filtering as well, not just when performing Clear All Filters.

We suspect that the issue is related to an error in the elements being returned when you click the Clear All Filter button. You can see from the image that the rendered elements are different from before clicking the button.

hidden link

hidden link

To confirm if this is due to our theme, you can try switching to a different theme and testing the Clear All Filter feature. Please provide us with a screenshot or screen recording if it works normally with a different theme.

[Waqar]

Thank you for sharing this update.

Do I have your permission to download a clone/snapshot of the website? This will help in investigating this on a different server, without affecting the actual website.

[leilaG-2]

Yes, please go ahead.

[Waqar]

Thank you for the permission and I've downloaded the website's clone.

I'll be running some tests and will share the details about those multi-select field styles, as soon as this testing completes.

Thank you for your patience.

[Waqar]

Thank you for waiting.

During testing on your website's clone, I was able to make select field styles work with the reset button action too, through this custom script:

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(".wpv-filter-form select").chosen()
});

You can include this script in the custom JS field in the view 'Product search'.
( screenshot: hidden link )

[leilaG-2]

Thank you Waqar. That's great! It works.

But when you click to go to the next page, the filters go back to having the same issue as before.
Could it back a clash with this JS code?

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: 0 }, 'fast');

});

[Waqar]

Thanks for the update and glad that it worked.

You can update the script code that I added slightly too:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated js_event_wpv_pagination_completed', 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(".wpv-filter-form select").chosen()
});

The inclusion of the 'js_event_wpv_pagination_completed' event will make sure that this code also works for the pagination changes.

[leilaG-2]

Thanks, that worked.

But now when I click the next page, then add a filter, it shoots down to the Bottom of the page.

[Waqar]

I've checked the products pages and the page does scrolls back to the top of the view after pagination.
( probably because of the other custom script that uses 'scrollTop' function )

For a very short instance, it does seem like the page has scrolled down when paginated results are loading. But that is not due any scrolling down. It is simply because the page's height decreases when previous results have disappeared and new results haven't loaded yet.