105

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?

106

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.

107

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.

108

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?

109

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

110

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

111

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>
1 Like
112

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.

113

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!

116

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.