Example 1: The Basics

Name Date
Sam Graham 2010-01-04
Joe Bloggs 2008-06-12
Geoff Bloggs 2008-06-13

HTML source

The above example is generated by the HTML below.

<h1>Example 1: The Basics</h1>

<div class="infochart" id="example_1_div">

First of all we place everything in a container DIV so that we can find it without searching the entire page, we give this a nice simple id of example_1_div.

<table class="infochart">
<tr>
  <th>Name</th>
  <th>Date</th>
</tr>

Now we start our table of data.

<tr style="display:none;" ajt:template="example_1_row">
  <td ajt:name="example_1_name"></td>
  <td ajt:name="example_1_date"></td>
</tr>

First up within the table, we include the empty template row.

The span elements are placeholders that will be replaced.

We can place this template anywhere within the container DIV, however since this example is a TR element, it's best to include it within the TABLE, otherwise some browsers will have a hard time finding it. (Because it'd be invalid XHTML.)

The ajt:template="example_1_row" attribute indicates that this is a template for ajaxTemplate.js and that is should be identified by the name example_1_row.

The row is also styled to be hidden, it's important to do this with a style attribute rather than a class, because it'll be turned off later, and ajaxTemplate.js prefers not to mess around with your CSS classes.

<tr>
  <td>Sam Graham</td>
  <td>2010-01-04</td>
</tr>
<tr>
  <td>Joe Bloggs</td>
  <td>2008-06-12</td>
</tr>
<tr>
  <td>Geoff Bloggs</td>
  <td>2008-06-13</td>
</tr>

These are our rows of initial data.

</table>

<ol ajt:actions="example_1_row" style="display:none;">

OK, that's the table done, now we define a list of rules to run on the empty template when we copy it.

Since this is a list of actions, we make it an OL list, with each LI item being an action.

We give the OL a special attribute ajt:actions="example_1_row". This defines the actions attribute in the ajt namespace has having value example_1_row.

The value says what template this list of actions is for, if you remember from a few moments ago, the empty template row had a matching ajt:template attribute to pair up with this.

As with the template row, this element is styled to be hidden.

<li ajt:replace="example_1_name" />

The first action is the simplest possible replace action, the ajt:replace="example_1_name" says "replace the target with the contents of the example_1_name field".

What target? Well, it defaults to looking for an element with attribute ajt:name="example_1_name" - the same name as the field.

<li ajt:style="[ajt:name='example_1_date']" ajt:replace="example_1_date" />

This second action is the more long-winded way of saying the same thing as the first rule, but for field example_1_date instead.

Instead of using the default target, it defines the target by its CSS style using the CSS selector rule [ajt:name='example_1_date'].

</ol>

</div>

Right, we've defined all the bits in the HTML document now, here's some Javascript to actually cut-n-paste the template and replace the values.

For clarity and simplicity various parts of this Javascript are hard-coded, in reality you'd want to dynamically generate them or pass them in as arguments to the function, or whatever suits your usage scenario.

<script language="javascript">
function example_1_submit( containerID )
{
    //  For simplicity we hard-code the values, but you would
    //  fetch them via AJAX or some other mechanism.
    var templateValues = {
        example_1_name: 'Random J Jones',
        example_1_date: '2010-01-04'
        };

    //  We call ajaxTemplate.copyTemplate() with the container DIV
    //  the name of the template, and the values to use within the template.
    var newChild = ajaxTemplate.copyTemplate(
        containerID, 'example_1_row', templateValues );

    if( !newChild )
    {
        alert( 'copyTemplate failed' );
        return;
    }

    //  Now we just append the replaced template to the end of our table.
    $(containerID).select( 'table.infochart tbody' ).first().appendChild( newChild );
}
</script>

<div class="formbuttons">
<input type="button" onclick="example_1_submit( $('example_1_div') );" value="Add New Row" />
</div>

And finally, a button to click so that the Javascript gets called.

Example 2: Pulling Values From A Form

Name Date
Sam Graham 2010-01-04
Joe Bloggs 2008-06-12
Geoff Bloggs 2008-06-13
Name Date

HTML source

The above example is generated by the HTML below.

<h1>Example 2: Pulling Values From A Form</h1>

<div class="infochart" id="example_2_div">

First of all we place everything in a container DIV so that we can find it without searching the entire page, we give this a nice simple id of example_2_div.

<table class="infochart">
<tr>
  <th>Name</th>
  <th>Date</th>
</tr>

Now we start our table of data.

<tr style="display:none;" ajt:template="example_2_row">
  <td ajt:name="example_2_name"></td>
  <td ajt:name="example_2_date"></td>
</tr>

First up within the table, we include the empty template row.

The span elements are placeholders that will be replaced.

We can place this template anywhere within the container DIV, however since this example is a TR element, it's best to include it within the TABLE, otherwise some browsers will have a hard time finding it. (Because it'd be invalid XHTML.)

The ajt:template="example_2_row" attribute indicates that this is a template for ajaxTemplate.js and that is should be identified by the name example_2_row.

The row is also styled to be hidden, it's important to do this with a style attribute rather than a class, because it'll be turned off later, and ajaxTemplate.js prefers not to mess around with your CSS classes.

<tr>
  <td>Sam Graham</td>
  <td>2010-01-04</td>
</tr>
<tr>
  <td>Joe Bloggs</td>
  <td>2008-06-12</td>
</tr>
<tr>
  <td>Geoff Bloggs</td>
  <td>2008-06-13</td>
</tr>

These are our rows of initial data.

</table>

<ol ajt:actions="example_2_row" style="display:none;">

OK, that's the table done, now we define a list of rules to run on the empty template when we copy it.

Since this is a list of actions, we make it an OL list, with each LI item being an action.

We give the OL a special attribute ajt:actions="example_2_row". This defines the actions attribute in the ajt namespace has having value example_2_row.

The value says what template this list of actions is for, if you remember from a few moments ago, the empty template row had a matching ajt:template attribute to pair up with this.

As with the template row, this element is styled to be hidden.

<li ajt:replace="example_2_name" />

The first action is the simplest possible replace action, the ajt:replace="example_2_name" says "replace the target with the contents of the example_2_name field".

What target? Well, it defaults to looking for an element with attribute ajt:name="example_2_name" - the same name as the field.

<li ajt:style="[ajt:name='example_2_date']" ajt:replace="example_2_date" />

This second action is the more long-winded way of saying the same thing as the first rule, but for field example_2_date instead.

Instead of using the default target, it defines the target by its CSS style using the CSS selector rule [ajt:name='example_2_date'].

</ol>

</div>

Right, we've defined all the bits in the HTML document now, here's some Javascript to actually cut-n-paste the template and replace the values.

For clarity and simplicity various parts of this Javascript are hard-coded, in reality you'd want to dynamically generate them or pass them in as arguments to the function, or whatever suits your usage scenario.

<script language="javascript">
function example_2_submit( containerID )
{
    //  Grab our values from the form.
    var templateValues = {
        example_2_name: $('example_2_name').value,
        example_2_date: $('example_2_date').value
        };

    //  We call ajaxTemplate.copyTemplate() with the container DIV
    //  the name of the template, and the values to use within the template.
    var newChild = ajaxTemplate.copyTemplate(
        containerID, 'example_2_row', templateValues );

    if( !newChild )
    {
        alert( 'copyTemplate failed' );
        return;
    }

    //  Now we just append the replaced template to the end of our table.
    $(containerID).select( 'table.infochart tbody' ).first().appendChild( newChild );

    //  Clear the form values so they're ready for input
    $('example_2_name').value = '';
    $('example_2_date').value = '';

    //  And pop focus back to the first field for them to type more in.
    $('example_2_name').focus();
}
</script>

<div>
<form onsubmit="example_2_submit( $('example_2_div') ); return false;">
<table>
  <tr>
    <td>Name</td>
    <td><input type="text" size="35" value="" name="name" id="example_2_name" /></td>
    <td>Date</td>
    <td><input type="text" size="15" value="" name="date" id="example_2_date" /></td>
  </tr>
</table>

<div class="formbuttons">
<input type="submit" value="Add New Row" />
</div>
</form>
</div>

And finally, a button to click so that the Javascript gets called.

© 2009-2013 Sam Graham, unless otherwise noted. All rights reserved.