Seamless pagination with "pjax"

kohru · 2020-10-20T11:36:35.652Z

on further reading of this quite long feed, I have added your code to reinitialise page related animations. Thanks for this, the only issue now is the hover interactions inside the collection lists on the collection items do not work

<!-- Start seamless-pagination custom code -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
  var containerSelector = '#seamless-replace';
  $(document).pjax(
    '.w-pagination-wrapper a',
    containerSelector,
    {
      container: containerSelector, 
      fragment: containerSelector,
      scrollTo: false,
      timeout: 2500,
    }
  );
 //Pjax navigation grab the attrs from the new page
	pjax._handleResponse = pjax.handleResponse;
  pjax.handleResponse = function(responseText, request, href, options) {

// get the new data-wf-page within the request text
  var data_wf_page = request.responseText.match(/data-wf-page=\"([a-z 0-9]+)\"/);
  if (data_wf_page && data_wf_page[1]) {
  self.data_wf_page = data_wf_page[1]; 
  } 
  pjax._handleResponse(responseText, request, href, options);
  }

  //Pjax navigation hooks for webflow interactions
  $(document).on("pjax:complete", function () {
    window.Webflow && window.Webflow.destroy();
    
    // set the current data-wf-page to the new attribute 
    // before reinitializing interactions
    $('html').attr('data-wf-page', self.data_wf_page); 
    
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require("ix2").init();
    document.dispatchEvent(new Event("readystatechange"));
  });
</script>

<!-- End seamless-pagination custom code -->

It would be amazing if you have a solution to this, and then it’s spot on!
read only
live
the paginated module is at the bottom of this cms page. Cheers

arranch · 2020-11-02T10:44:55.723Z

i am having trouble implementing this onto my product page where there are 2 collections to paginate.

https://dustarrest.webflow.io/product/dura-dv15-mb-230

anyone able to help me?

thanks!

Ashley_Hewins · 2020-11-02T19:20:09.787Z

Hi Matthew, do you have any idea why this code is not working?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
  var containerSelector = '#seamless-replaceNA';
  $(document).pjax(
    '.w-pagination-wrapperNA a',
    containerSelector,
    {
      container: containerSelector, 
      fragment: containerSelector,
      scrollTo: false,
      timeout: 2500,
    }
  );
    // These 3 lines should reinitialize interactions
  $(document).on('pjax:end', function() {
    Webflow.require('ix2').init();
  });
</script>

Omer_Aviram · 2020-12-05T14:41:02.601Z

Hey, does someone encounter the problem of using this custom code + use webflow lightbox component?
The lightbox doesn’t open when this code is in use
If anyone has a solution it would help a lot! thanks.

Read-only link: https://preview.windwer.shop/preview/kirot?utm_medium=preview_link&utm_source=designer&utm_content=kirot&preview=c0bdb605239f27b9478319026a897e86&pageId=5e88525bcce5fb97bca7be15&itemId=5ec7a9dac6f19bc42671da95&mode=preview

joshldesign · 2020-12-12T10:57:17.396Z

This worked for fixing my animations. Thank you so much.

thetuesdaydude · 2020-12-15T21:54:38.007Z

Hi, my main problem with my cms slider pagination at the moment is that the whole page reloads when I click Next or Preview. Any ideas on how to fix that?

Val777 · 2021-06-23T18:21:38.176Z

A million times, thank you

iDor · 2021-07-17T19:31:50.413Z

radmitry:

set scroll to number

@radmitry Hi Radmitry, can you share how to set the scroll to a number? Is that done in the animation or in the settings? Thanks very much.

radmitry · 2021-07-17T20:18:54.168Z

In the original code you will see a “scroll to” reference, just change it to a number of pixels from top of the page, for example 250 like that

<!-- Start seamless-pagination custom code -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
  var containerSelector = '#seamless-replace';
  $(document).pjax(
    '.w-pagination-wrapper a',
    containerSelector,
    {
      container: containerSelector, 
      fragment: containerSelector,
      scrollTo: 250,
      timeout: 2500,
    }
  );
  // These 3 lines should reinitialize interactions
  $(document).on('pjax:end', function() {
    Webflow.require('ix2').init();
  });
</script>

<!-- End seamless-pagination custom code -->

iDor · 2021-07-22T22:37:28.704Z

@radmitry Thank you!

mjomairi · 2021-08-04T21:21:29.547Z

I’m having an issue with the pagination after applying the code and publishing the site. Once I hit next, the whole site is frozen and I can’t seem to navigate back/forth or click on any of the buttons. Any thoughts?

samd1 · 2021-11-29T09:16:03.330Z

Hey did anyone manage to implement navigation that can go to a specific item within the collection?

The implementation as shown in the demo is working great for me, I just want to also add a list of items that can navigate to specific items within the collection with pjax.

Florin_Mehedinti · 2021-12-16T01:12:58.624Z

Anyone else having trouble implementing this for multiple paginated lists on a single page?

The below code works fine under preview mode but when published (to webflow.io staging domain) the second list will not paginate at all.

<!-- Start seamless-pagination custom code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

<script>
  var containerSelector = '#seamless-replace';
  $(document).pjax(
    '.w-pagination-wrapper a',
    containerSelector,
    {
      container: containerSelector, 
      fragment: containerSelector,
      scrollTo: false,
      timeout: 2500,
    }
  );
  
    var containerSelector2 = '#seamless-replace2';
    $(document).pjax(
    '.w-pagination-wrapper a',
    containerSelector2,
    {
      container: containerSelector2, 
      fragment: containerSelector2,
      scrollTo: false,
      timeout: 2500,
    }
  );

 //Pjax navigation grab the attrs from the new page
	pjax._handleResponse = pjax.handleResponse;
  pjax.handleResponse = function(responseText, request, href, options) {

    // get the new data-wf-page within the request text
  	var data_wf_page = request.responseText.match(/data-wf-page=\"([a-z 0-9]+)\"/);
  	if (data_wf_page && data_wf_page[1]) {
  	self.data_wf_page = data_wf_page[1]; 
  	} 
  
  	pjax._handleResponse(responseText, request, href, options);
  }
	
  //Pjax navigation hooks for webflow interactions
  $(document).on("pjax:complete", function () {
    window.Webflow && window.Webflow.destroy();
    
    // set the current data-wf-page to the new attribute 
    // before reinitializing interactions
    $('html').attr('data-wf-page', self.data_wf_page); 
    
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require("ix2").init();
    document.dispatchEvent(new Event("readystatechange"));
    
    // Re-open previously opened accordion
    const openAccordion = $('[data-click="faq"].open');
    openAccordion.removeClass('open');
    openAccordion.click();
  });
</script>

<!-- End seamless-pagination custom code -->

Note: Purposefully didn’t number each .w-pagination-wrapper as above code snippets suggest because it seems unnecessary as that class is generated by Webflow anyway. But I tried it both ways.

Sarah_Knaster · 2022-01-02T21:40:13.761Z

I’ve tried everyone’s suggestions and am still having issues with using this script with multiple collections in tabs (organizing blog posts). It seems to be working in preview mode but does not work on the published site. I have even removed interactions in that section. Nothing seems to get it to work.

I’ve checked to make sure all script tags in custom code are closed and have tried all of your solutions. Really stuck here.

Here is the read-only. Does anyone have any advice here?

webdev · 2022-01-03T16:31:36.147Z

I suggest you use Finsweet’s CMS Load JS. Built for Webflow. CMS Load more for Webflow - No-code using Attributes

Sarah_Knaster · 2022-01-03T17:17:41.024Z

@webdev WOW. Thank you so much!!! This took me 30 seconds and worked fantastic!!

Jessica_Oddi · 2022-01-27T23:00:56.812Z

Question! This works great. However I’m running into an accessibility issue with screen readers. Keyboard navigation is fine. But for some reason when I used VoiceOver and Narrator, the screen reader jumps to the pagination section under the slider after pressing next or previous, instead of to the top of the slider.

My question is, would there be a way to set the ‘scrollTo’ to an anchor element instead of a number? So the screen reading device focuses on the slider and not the pagination box. That way it directs the focus there rather than skipping over it. I tried setting the ‘scrollTO: containerSelector’ but that didn’t work.

Working site: https://winterhousefilms.webflow.io
Script Code:

<!-- seamless-pagination custom code -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>

    var containerSelector = '#seamless-replace';
    $(document).pjax(
      '.w-pagination-wrapper a',
      containerSelector, {
        container: containerSelector,
        fragment: containerSelector,
        scrollTo: containerSelector,
        timeout: 2500,
      }
    );

    // These 3 lines should reinitialize interactions

    $(document).on('pjax:end', function() {
      Webflow.require('ix2').init();
    });

</script>

csadmin · 2022-04-01T19:51:10.318Z

Has anyone figured out a solution to implement this in a dropdown/accordion/toggle?

This works great when my table is outside of an accordion, but stops working when it’s moved inside. I imagine an issue of loading but I’m not familiar enough with pjax to mess with the code.

waycroft · 2022-07-27T21:00:05.168Z

So so helpful! Worked literally out the box––was surprised actually, and I’m spending the same I saved by how quickly this worked actually just looking at WHY it worked immediately. Haha, cheers!

Andre_Mortari · 2024-03-07T22:01:49.770Z

Hi guys,

Is this still necessary or there is another way without a custom code? I’m using the pagination to make a related post on a blog page but it goes to top everytime.

Hope to hear from you soon.