Click To Load

This tutorial will show you how to implement "Click To Load" behavior with only a few lines of IntercoolerJS. It builds on the previous Infinite Scroll tutorial.



Here are the steps for implementing inifinite scroll

  • Extract a partial of the row rendering for your table, and add an id to the enclosing tbody so we can target it for appending.
  • Add a hidden input to the last row of the table that is rendered, with the name page and value of the next page to load
  • Add a button after the table that uses the ic-append-from, ic-target, and ic-trigger-on attributes to trigger appending to the table body, and that includes the hidden input using the ic-include tag to include the last hidden input in the table.

Git Diff

Here is a diff between infinite scroll and click-to-load: