[Resolved] Pagination w/ manual transition + page reload and scroll to anchor or top of div

[Author]

Posts

[Rita]

Hi there

I have quite a few views on this site that include a CRED FORM inside the view loop. The cred form gets information from the 'current post in the loop' so I can't use ajax and must use the search and pagination with page reload to ensure the form inside the loop gets the correct information.

Also, on the pages where these views are displayed there is a fair amount of content above the view so when the user clicks the 'next' or 'previous' page buttons I want the user to be scrolled to the top of the view or the top of a specified div and NOT the top of the page.

On other views where I can use ajax pagination I have a nice little JS function and an anchor in place. Like this:

DIV location to scroll to (can sit anywhere on the page):
<div class='scroll888'></div>

JS function in the loop editor:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
if( data.view_unique_id === 888){
jQuery('html, body').animate({ scrollTop: jQuery(".scroll888").offset().top }, 500);
}
});

Where '888' is the view ID...

This only works for pagination with ajax...

Would there be a solution for pagination with page reload?

Thanks in advance!

Rita

[Nigel]

Hi Rita

You could add a similar function, but simply apply it to the document ready event.

But! That would also be applied the first time a user visits the page, so you would want to include an if statement and only update the scroll position if a pagination link had been followed (or search filter applied?).

When a custom search has been applied or results paginated, URL parameters such as wpv_view_count will be added, so you can test for the presence of those to know whether this is the first visit or not.

[Rita]

Hi Nigel

Hope you are well!

Yes, that makes sense...

I have tested an idea on a view with the following settings:
1. Pagination enabled with manual transition and page reload
2. Full page refresh when visitors click on the search button

and then this in the LOOP EDITOR:

[wpv-layout-start]
<div class='scroll888'></div>
[wpv-conditional if="( '[wpv-search-term param='wpv_view_count']' ne '' )"]
<script>
jQuery(document).ready(function() {
if( data.view_unique_id === 888){
jQuery('html, body').animate({ scrollTop: jQuery('.scroll888').offset().top }, 500);
}
});
</script>
[/wpv-conditional]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
CRED FORM INCLUDED HERE
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[wpv-pagination][wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]❮[/wpml-string][/wpv-pager-prev-page][wpv-pager-next-page force="true"][wpml-string context="wpv-views"]❯[/wpml-string][/wpv-pager-next-page][/wpv-pagination]
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]
None found...</div></div>
[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Alas... it doesn't work... am I doing something wrong? or have I got it wrong altogether? I confess my jQuery skills aren't great...

Rita

[Christopher Amirian]

Hi Rita, may I have a link to the page with the view and pagination so I can check?

I might be able to provide a script for that.

Thanks.

[Rita]

Hey Christopher
Ok great! Yes, you surely can.
Here is a little example: hidden link
I don't have a form in the view loop for these posts though. The views that do are not public. Hope that doesn't matter.
Rita

[Christopher Amirian]

Hi Rita,

Thank you for the link. For that specific page you need to use a script like this:

jQuery(document).ready(function($) {
    $('html, body').animate({
        scrollTop: $('#wpv-view-layout-29045').offset().top
    }, 1000); // 1 second animation
});

29045 is the ID of the view, so for other views you can replace the ID and it should work.

Thanks.

[Rita]

Hi Christopher

Thanks for the script. Unfortunately it doesn't work...

I have two example views for you to test now:

Page: hidden link
The user is automatically scrolled straight to the top of the view div on landing.
On clicking the buttons it does scroll back to the top of the view div.
Almost works!

Post: hidden link
Scroll down to the Commentary section where there is a view and a cred form in the view loop. On clicking the page buttons the user is scrolled back to the top of the post and not the top of the view div.
Doesn't work...

Hope this helps!
Rita

[Rita]

I beg your pardon Christopher!

The script on the Support page - hidden link - works. I just found a typo in my view that was breaking the conditional. Which makes sense.

So its just the view with the CRED FORM in the view loop that still doesn't work... This one... hidden link

Hope this helps!
Rita

[Christopher Amirian]

Hi Rita,

The view ID on the new page you have mentioned is different that is why you should not use the code I mentioned for that page,

Instead, you should use this code for that page:

jQuery(document).ready(function($) {
    $('html, body').animate({
        scrollTop: $('#wpv-view-layout-37257-CATTReb735f8dc8fc750356ef234fcaec7498TCPID39953').offset().top
    }, 1000); // 1 second animation
});

Keep the previous code for the previous page and this new code for the new page.

Thanks.

[Rita]

Aha ok understand.
Bravo that works perfectly.
Thank you very much indeed!

[Rita]

Hi Christopher
Yes.. it does work on that view for that post... but there are many parent posts (3 different post types) with this same view...
I don't think its possible to set the view_count ID?
For example these are 3 parent posts with the same child view but, of course, different ID's for each:
wpv_view_count=37257-TCPID40234
wpv_view_count=37257-TCPID40180
wpv_view_count=37257-CATTReb735f8dc8fc750356ef234fcaec7498TCPID39953
Ah...

[Christopher Amirian]

Hi Rita,

That will make it a little bit complicated.

From what I see the ID portion of the View is the same. But I am not sure. Maybe if you can share the sub page URLs I can test.

Would you please change the code for the latest problem to:

jQuery(document).ready(function($) {
    $('html, body').animate({
        scrollTop: $('[id^="wpv-view-layout-37257"]').offset().top
    }, 1000); // 1 second animation
});

What I have changed is the selector which will check the IDs that contain the "wpv-view-layout-37257" portion, ignoring the rest of the code that is attached such as "CATTReb735f8dc8fc750356ef234fcaec7498TCPID39953".

So it should select all the instances of the sub pages.

Thanks.

[Rita]

Genius Christopher!
This works perfectly. I am delighted. Thank you!
I would share the other posts but they are all hidden behind a mountain of membership permissions. Let me know if you would like to see them though! I'll set you up with a temporary membership so you can login and view.
Its no problem at all.
Just let me know.
Rita

[Christopher Amirian]

Hi Rita,

I'd be happy to but you will need to create a new ticket as this one is set as resolved.

Thanks.