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.

Video

Outline

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:

https://github.com/LeadDyno/intercooler-tutorial-app/commit/11322f35cda1a7c9fa480f845b43cb28e162f64a