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. |