intercooler
Version:
Making AJAX as easy as anchor tags
192 lines (169 loc) • 6.47 kB
HTML
---
layout: default
nav: tutorial
---
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Implementing Click To Load</h1>
<p>This example demos a click to load UI for a table.</p>
<p>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.</p>
<h2>Explanation</h2>
<ul>
<li>
After the last row of data, emit a single row/column with a colspan of the entire table, with a button in it.
</li>
<li>
That button has an
<a href="/attributes/ic-get-from.html"><code>ic-get-from</code></a>
attribute that loads the next page of data (including another button). The button targets the closest
table row for replacement with the
<a href="/attributes/ic-target.html"><code>ic-target</code></a>
attribute, using the special <code>closest</code> 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
<a href="/attributes/ic-replace-target.html"><code>ic-replace-target</code></a>
is set to <code>true</code>
</li>
</ul>
<h2>Demo</h2>
<div>
<ul class="demo-nav nav nav-pills">
<li role="presentation" class="active"><a href="#demo" aria-controls="demo" role="tab" data-toggle="tab">Live
Demo</a></li>
<li role="presentation"><a href="#code" aria-controls="demo" role="tab" data-toggle="tab">Source Code</a></li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="demo">
<!--
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>
</div>
<div role="tabpanel" class="tab-pane" id="code">
<pre id="src-pre"></pre>
</div>
</div>
</div>
<script>
$("#src-pre").text($("#demo").html());
</script>
</div>
</div>