Skip to content

Functionality Issues After Loading Next Page

Gabriel Somoza edited this page Jun 9, 2017 · 4 revisions

When our plugin loads the next set of results, they're inserted right into the page just as they come. If the custom JavaScript follows best practices then it should detect the new elements and decorate them automatically. Unfortunately for everyone, well-written plugins that use JavaScript best practices are not as common as they should.

Some themes "decorate" catalog results with JavaScript after page-load. This is quite common on themes that show reviews, special JS-driven widgets (like tooltips), etc., right on the product grid.

So if you notice that the new results are missing functionality, while the first set of results does work, then you'll have to manually decorate the new elements.

To do that, you can hook to one of the IAS callback functions. You can find them around line 33 in the following file: https://github.com/webcreate/infinite-ajax-scroll/blob/master/src/jquery-ias.js - and here's the Events documentation: http://infiniteajaxscroll.com/docs/events.html

For example:

$(document).on('infiniteScrollReady', function(ias) {
  // hook to the IAS 'rendered' event
  ias.on('rendered', function(items) {
    $(items).each(function() {
        $('.tooltip', this).tooltip();
    })
  })
})