intercooler/www/examples/index.html

Making AJAX as easy as anchor tags

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

<div class="container">

  <h2>Intercooler Examples</h2>

  <p>Below are a series of examples demonstrating common UI/UX problems being solved with intercooler.  All
  examples use <a href="https://github.com/jakerella/jquery-mockjax">mockjax</a> 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.</p>

  <h3>Examples</h3>

  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th style="width:210px">Title</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="/examples/clicktoedit.html">Click To Edit</a>
        </td>
        <td>
          A simple demo of inline editing of data within a page
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/infinitescroll.html">Infinite Scroll</a>
        </td>
        <td>
          Loading more elements when the bottom of a page is scrolled into view.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/clicktoload.html">Click To Load</a>
        </td>
        <td>
          Similar to the infinite scroll demo, but requires that a user explicitly click on a button
          to load more items.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/bulkupdate.html">Bulk Update UI</a>
        </td>
        <td>
          A demo of a table-driven UI, where multiple rows are updated at once via checkbox selection.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/lazyload.html">Lazily Loading An Element</a>
        </td>
        <td>
          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.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/inlinevalidation.html">Inline Form Validation</a>
        </td>
        <td>
          Shows how inputs can be validated on the server side on change, allowing you to keep all validation
          logic secure and centralized.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/deleterow.html">Inline Row Removal</a>
        </td>
        <td>
          Similar to the Bulk Update Demo, this shows how to remove items from a table UI
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/activesearch.html">Active Search</a>
        </td>
        <td>
          Demonstrates how to implement a Google-like active search, where results are show
          as the user types
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/dependentselect.html">Dependent Select</a>
        </td>
        <td>
          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.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/history_tab1.html">History Support</a>
        </td>
        <td>
          Demonstrates how to integrate History into your Intercooler app with a simple tabbed
          example.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/pause_play.html">Pause/Play Live View</a>
        </td>
        <td>
          Shows how to implement a Pause/Play UI for a polling-based live view.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/jobrunner.html">Job Runner</a>
        </td>
        <td>
          Shows how to implement a fairly complicated Job-Runner UI, with smoothly animated
          progress bars.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/typeahead.html">Integrating With Typeahead</a>
        </td>
        <td>
          Shows how to integrate intercooler functionality into bootstraps typeahead functionality.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/bootstrap_confirm.html">Bootstrap Confirm</a>
        </td>
        <td>
          Shows how to use a Bootstrap confirm dialog with an intercooler button.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/sortablelist.html">Sortable List</a>
        </td>
        <td>
          Shows how to use SortableJS and intercooler.js to save a drag-and-drop ordered list after updates.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/prototyping.html">Prototyping</a>
        </td>
        <td>
          Shows how to do client-side only intercooler development using the <code>ic-ignore</code> attribute
          and local sections
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/debugging.html">Integrated Debugger</a>
        </td>
        <td>
          Shows how to work with the integrated debugging environment in Intercooler.
        </td>
      </tr>
      <tr>
        <td>
          <a href="/examples/modifying_requests.html">Modifying Requests</a>
        </td>
        <td>
          Shows how to modify an intercooler request via client side javascript: adding custom headers, variables
          or canceling a request.
        </td>
      </tr>
    </tbody>
  </table>

  <h3>Examples</h3>

  <h3>Videos</h3>

  <a href="/tutorials/index.html">Some Older Videos - Rails oriented &amp; date, but still potentially useful.</a>

</div>