Seamless pagination with "pjax"

Community resources Webflow Tips
61

If anyone is using the newer Pjax library and is still having trouble reinitializing page related animations, I was able to get them working by grabbing the destination page “data-wf-page” attribute and setting the current html attribute to match.

/**
   * 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"));
  });
1 Like