Skip Navigation

[Résolu] View jumps to the top of the list after ajax pagination (infinite scroll)

This support ticket is created Il y a 8 années et 1 mois. 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.

Aucun de nos assistants n'est disponible aujourd'hui sur le forum Jeu d'outils. Veuillez créer un ticket, et nous nous le traiterons dès notre prochaine connexion. Merci de votre compréhension.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Marqué : ,

Ce sujet contient 1 réponse, a 2 voix.

Dernière mise à jour par Beda Il y a 8 années et 1 mois.

Assisté par: Beda.

Auteur
Publications
#422748

I am trying to: Load posts (Ajax - Infinite Scroll pagination) using lien caché

I visited this URL: lien caché (Scroll down to the section: 'Recent Posts'

I expected to see:

Instead, I got:

The posts loads successfully as I keep scrolling but after each pagination is complete but jumps to the top of the list.

In mobile: the view scrolls back to the top of the list (Recent Posts)
In Desktop: the view scrolls up by couple of pixels.

In the pagination JS section, I've the following code:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.effect (string) The View AJAX pagination effect
* data.speed (integer) The View AJAX pagination speed in miliseconds
* data.layout (object) The jQuery object for the View layout wrapper
*/
runmasonry();
});

In the View's JS section, I've the following code:

function runmasonry() {
addthis.layers.refresh()
var $grid = jQuery('#recent-posts-main-view .grid').imagesLoaded( function() {
// init Masonry after all images have loaded

$grid.masonry({
// options...
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
columnWidth: '.grid-sizer',
percentPosition: true

});

});

I also have a JS in the footer-layouts.php

jQuery(function() {
var $grid = jQuery('#recent-posts-main-view .grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
columnWidth: '.grid-sizer',
percentPosition: true

});
});

});

#422795

If the issue persists, when you remove all Custom Code, then only we can tell if this is a Views Bug.

Please also first have a look at this potential HotFixes:
https://toolset.com/known-issues/?wpv-pr-child-of-download%5B%5D=308&wpv_post_search&wpv_aux_current_post_id=399043&wpv_sort_orderby=post_date&wpv_sort_order=desc&wpv_view_count=401205-TCPID399043&errata-status%5B%5D=1

The two below might be of great use:
https://toolset.com/errata/views-rollover-fade-transition-bumps-content/
https://toolset.com/errata/views-ajax-pagination-fails-form-results-rendered-separatedly/

Please apply this fixes, and try again.

Apart from that, I see that the View scrolls up again, but as far I see, it scrolls only as far up as you have been reading at the moment of no more posts.
This should be expected so far, as otherwise, you would loose track reading.

But I suspect, with above fix, the problem can be solved.

If not, we need to analyze this on a View using Toolset Features, before we can assume it is a Bug in views and not a conflict with Custom Code or the masonry framework, which seems to create often some troubles with Views.

Ce ticket est maintenant fermé. Si vous êtes un client de Toolset et que vous avez besoin d'aide, veuillez ouvrir un nouveau ticket d'assistance