Implementing Click To Load

This example demos a click to load UI for a table.

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.

Explanation

After the last row of data, emit a single row/column with a colspan of the entire table, with a button in it.
That button has an ic-get-from attribute that loads the next page of data (including another button). The button targets the closest table row for replacement with the ic-target attribute, using the special closest syntax. Finally, because we want to replace the entire row with the new page of rows returned (rather than simply replacing the inner content of the row), the ic-replace-target is set to true

Name	Email	ID #
Agent Smith	void0@null.org	D92B582CA8GDD94
Agent Smith	void1@null.org	4AEC9GF0F0A35G5
Agent Smith	void2@null.org	3G80BFBF490BBAF
Agent Smith	void3@null.org	A4CB29F6G6D812D
Agent Smith	void4@null.org	FDFEGE1580A78C0
Agent Smith	void5@null.org	96961373E447G6F
Agent Smith	void6@null.org	05EE57C9C2GD1B0
Agent Smith	void7@null.org	2G6BC043G9F12BD
Agent Smith	void8@null.org	2G6BC043G9F12BD
Agent Smith	void9@null.org	3C8D2157F4B854F


  <!--
    This is the initial table.  As with other examples, this table would normally be generated with the same
    template logic defined in the rowsTemplate() below, but is inlined here to make the example more clear.

    The last row in the table includes an ic-append-from directive to append more rows when the 'scrolled-into-view'
    event is fired.  It targets the <tbody> of the table, so the rows are appended to the table, and uses an indicator
    to show that more rows are loading.
    -->

  <table class="table">
    <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>ID #</th>
    </tr>
    </thead>
    <tbody id="contactTableBody">
    <tr>
      <td>Agent Smith</td><td>void0@null.org</td><td>D92B582CA8GDD94</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void1@null.org</td><td>4AEC9GF0F0A35G5</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void2@null.org</td><td>3G80BFBF490BBAF</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void3@null.org</td><td>A4CB29F6G6D812D</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void4@null.org</td><td>FDFEGE1580A78C0</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void5@null.org</td><td>96961373E447G6F</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void6@null.org</td><td>05EE57C9C2GD1B0</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void7@null.org</td><td>2G6BC043G9F12BD</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void8@null.org</td><td>2G6BC043G9F12BD</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void9@null.org</td><td>3C8D2157F4B854F</td>
    </tr>
    <tr>
      <td colspan="3">
        <center> <!-- lol -->
          <button class="btn btn-default" ic-get-from="/contacts/?page=2" ic-target="closest tr" ic-replace-target="true">
            Load More Agents... <i class="fa fa-spinner fa-spin ic-indicator" style="display:none"></i>
          </button>
        </center>
      </td>
    </tr>
    </tbody>
  </table>

  <script>

    //========================================================================
    // Mock Server-Side HTTP End Point
    //========================================================================
    $.mockjax({
      url: /\/contacts.*/,
      responseTime: 800,
      response: function (settings) {
        var queryStr = settings.url.substring(settings.url.lastIndexOf('?'));
        var params = parseParams(queryStr);

        var page = parseInt(params['page']);
        var contacts = dataStore.contactsForPage(page)
        this.responseText = rowsTemplate(page, contacts);
      }
    });

    //========================================================================
    // Mock Server-Side Templates
    //========================================================================
    function rowsTemplate(page, contacts) {
      var txt = "";
      for (var i = 0; i < contacts.length; i++) {
        var c = contacts[i];
        txt += "<tr> \
                  <td>" + c.name + "</td><td>" + c.email + "</td><td>" + c.id + "</td> \
                </tr>";
      }
      txt += loadMoreRow(page);
      return txt;
    }

    function loadMoreRow(page) {
      return '<tr id="replaceMe"> \
                <td colspan="3"> \
                  <center> \
                   <button class="btn btn-default"   ic-post-to="/contacts/?page=' + (page + 1) + '" ic-target="closest tr" ic-replace-target="true">\
                     Load More Agents... <i class="fa fa-spinner fa-spin ic-indicator" style="display:none"></i> \
                   </button> \
                   </center>\
                 </td>\
               </tr>';
    }

    //========================================================================
    // Mock Data Store
    //========================================================================
    var dataStore = function(){
      var contactId = 9;
      function generateContact() {
        contactId++;
        var idHash = "";
        var possible = "ABCDEFG0123456789";
        for( var i=0; i < 15; i++ ) idHash += possible.charAt(Math.floor(Math.random() * possible.length));
        return { name: "Agent Smith", email: "void" + contactId + "@null.org", id: idHash }
      }
      return {
        contactsForPage : function(page) {
          var vals = [];
          for( var i=0; i < 10; i++ ){
            vals.push(generateContact());
          }
          return vals;
        }
      }
    }()


  </script>