Intercooler Examples

Below are a series of examples demonstrating common UI/UX problems being solved with intercooler. All examples use mockjax to provide server side responses. I've tried to make it fairly obvious what your server-side environment would need to do to implement them.


Title Description
Click To Edit A simple demo of inline editing of data within a page
Infinite Scroll Loading more elements when the bottom of a page is scrolled into view.
Click To Load Similar to the infinite scroll demo, but requires that a user explicitly click on a button to load more items.
Bulk Update UI A demo of a table-driven UI, where multiple rows are updated at once via checkbox selection.
Lazily Loading An Element Lazily loading an element can be used to make perceived performance faster: the enclosing page loads quickly, the computationally intensive section loads when it is ready, and a spinner is shown to indicate things are happening.
Inline Form Validation Shows how inputs can be validated on the server side on change, allowing you to keep all validation logic secure and centralized.
Inline Row Removal Similar to the Bulk Update Demo, this shows how to remove items from a table UI
Active Search Demonstrates how to implement a Google-like active search, where results are show as the user types
Dependent Select Shows how to implement selects that depend on one another: by changing one, the values available in the other select are retrieved from the server side.
History Support Demonstrates how to integrate History into your Intercooler app with a simple tabbed example.
Pause/Play Live View Shows how to implement a Pause/Play UI for a polling-based live view.
Job Runner Shows how to implement a fairly complicated Job-Runner UI, with smoothly animated progress bars.
Integrating With Typeahead Shows how to integrate intercooler functionality into bootstraps typeahead functionality.
Bootstrap Confirm Shows how to use a Bootstrap confirm dialog with an intercooler button.
Sortable List Shows how to use SortableJS and intercooler.js to save a drag-and-drop ordered list after updates.
Prototyping Shows how to do client-side only intercooler development using the ic-ignore attribute and local sections
Integrated Debugger Shows how to work with the integrated debugging environment in Intercooler.
Modifying Requests Shows how to modify an intercooler request via client side javascript: adding custom headers, variables or canceling a request.



Some Older Videos - Rails oriented & dated, but still potentially useful.