--- layout: default nav: tutorial ---

# 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