Scroll down to view's results

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user has an AJAX-based search view and he would like to scroll down to the results after an AJAX search completes

Solution:
Rely on the view's Javascript events to execute a scroll-down command to the element that holds the results:

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
    */
     console.log('results updated');
     jQuery('html, body').animate({
          scrollTop: jQuery(".js-wpv-loop-wrapper").offset().top - 70
     }, 1000);
});

Relevant Documentation:
https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

This support ticket is created 3 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic is split from https://toolset.com/forums/topic/display-a-view-filter-selection-visually/

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

Tagged: Custom search, Views plugin

This topic contains 4 replies, has 2 voices.

Last updated by JoelK2744 3 years, 10 months ago.

Assisted by: Jamal.

Author

Posts

March 12, 2021 at 9:47 am #1983533

JoelK2744

Thanks Jamal, the 'custom search results have been updated' option of the custom search events seems to be the one I need.

Is there any way of automatically scrolling down to where the View Output starts when either the 'Custom Search Submit' or 'Custom Search Reset' buttons are clicked?

Thanks

March 12, 2021 at 9:52 am #1983559

Jamal

You can use the js_event_wpv_parametric_search_results_updated event to scroll down after the results are updated in the view. You can use the scrollTop funtion in jQuery.

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('selector of results').scrollTop();
});

Both when you perform a search, or you reset the view's filters, the results will be updated in the view, and the above event will fire.

Let me know where I can see this view on your website and I'll help you with the Javascript code to scroll to the results.

March 12, 2021 at 11:53 am #1983689

JoelK2744

Thanks Jamal, I've created a test view here - hidden link

March 13, 2021 at 1:39 pm #1984963

Jamal

The following code should work for both buttons(search and reset):

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
    */
     console.log('results updated');
     jQuery('html, body').animate({
          scrollTop: jQuery(".js-wpv-loop-wrapper").offset().top - 70
     }, 1000);
});

Please note the following:
- This code assumes that the page has only one view. Otherwise this needs to be updated 'jQuery(".js-wpv-loop-wrapper")'.
- The scrolling will be animated for 1000ms.
- I am removing 70px from the position of the top of the results(60px is the height of the top menu + 10px for ergonomics).

I hope this helps you understand how to do it. Please note that this is custom code and is therefore out of the scope of the support forum. If you need advanced customizations, consider hiring a developer.

March 13, 2021 at 7:44 pm #1985261

JoelK2744

That's working great, thanks Jamal