jQuery Templates with Salesforce Ajax Toolkit

jQueryTemplateDemo.html

<apex:page title="jQuery Template Demo">
    
    <!-- Get the session for connection.js -->
    <script type="text/javascript">
        var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    
    <!-- Script references -->
    <apex:includeScript value="{!URLFOR($Resource.jQueryTemplateBeta, 'jquery-1.4.4.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryTemplateBeta, 'jquery.tmpl.js')}"/>
    <script src="../../soap/ajax/22.0/connection.js" type="text/javascript"/>

    <!-- Javascript Page Load -->
    <script type="text/javascript">
    
    // Document-ready event
    $(function () {
    
        // Bind Data on Page Load
        $('#output').html('loading...');
        loadData();
        
        // Refresh Button Event Handler
        $('.reloadData').live('click', function () {
            $('#output').empty();
            $('#output').html('reloading...');
            loadData();
        });
        
        // Edit Button Event Handler
        $('.dataRow, .dataEdit').live('click', function () {
        
            // Update the row template to edit
            var tmplItem= $(this).tmplItem();
            tmplItem.tmpl = $.template('#dataEditRowTemplate');
            tmplItem.update();
            
            // Select the first textbox
            $(tmplItem.nodes).find('input').first().focus();
            return false;
        });
        
        // Update Button Event Handler
        $('.dataUpdate').live('click', function () {

            // Get the template item
            var tmplItem= $(this).tmplItem();
            var data= tmplItem.data;
            
            // Update the data
            var tableRow = $(this).parents('tr');
            data.FirstName = tableRow.find('.firstName').val();
            data.LastName = tableRow.find('.lastName').val();
            
            // Commit the changes
            var updateResult = sforce.connection.update([data]);

            // Check for successful update
            if (updateResult[0].getBoolean("success")) {
                // Update the row template
                tmplItem.tmpl = $.template('#dataRowTemplate');
                tmplItem.update();
                
            } else {
                // API error
                alert(updateResult[0]);
            }
            return false;
        });
        
       // Cancel Button Event Handler
        $('.dataCancel').live('click', function () {
        
            // Update the row template to view only
            var tmplItem= $(this).tmplItem();
            tmplItem.tmpl = $.template('#dataRowTemplate');
            tmplItem.update();
            return false;
        });
        

    });
    
    function loadData() {
    
        // On page-load, run query then render results
        sforce.connection.query("Select Id, FirstName, LastName, LAN_ID__c From User Where Profile.Name = 'CIGNA Sys Admin' Order By LastModifiedDate Desc Limit 15", 
        {
            // Call layoutResult if the request is successful  
            onSuccess: layoutResults,
            
            // Call queryFailed if the api request fails
            onFailure: queryFailed
        });
    }
        
    function layoutResults(queryResult, source) {
    
        // Render Template
        var render = $('#dataTableTemplate').tmpl(queryResult);
    
        // Append to Page
        $('#output').empty();
        render.appendTo('#output');
    }
    
    function queryFailed(error) {
    
        // Simple javascript alert
        alert(error);
    }

    </script>
  
    <!-- jQuery template #1 (parent template for data table) -->
    <script id="dataTableTemplate" type="text/x-jquery-tmpl">
        <h2>Data (Count: ${size})</h2>&nbsp;<a class="reloadData" href="#">Reload</a>
        <table class="dataTable">
            <colgroup>
                <col width="35%"/><!-- First Name -->
                <col width="35%"/><!-- Last Name -->
                <col width="15%"/><!-- Lan ID -->
                <col width="15%"/><!-- [Button] -->
            </colgroup>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Lan ID</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                {{tmpl(getArray('records')) "#dataRowTemplate"}}
            </tbody>
        </table>
    </script>
    
    <!-- jQuery template #2 (nested template for data rows) -->
    <script id="dataRowTemplate" type="text/x-jquery-tmpl">
        <tr class="dataRow">
            <td>${FirstName}</td>
            <td>${LastName}</td>
            <td>${LAN_ID__c}</td>
            <td><a class="dataEdit" href="#">Edit</a></td>
        </tr>
    </script>
    
    <!-- jQuery template #3 (nested template for editing data rows) -->
    <script id="dataEditRowTemplate" type="text/x-jquery-tmpl">
        <tr class="dataEditRow">
            <td><input class="firstName" style="width:175px;" type="text" value="${FirstName}"></input></td>
            <td><input class="lastName" style="width:175px;" type="text" value="${LastName}"></input></td>
            <td>${LAN_ID__c}</td>
            <td>
                <a class="dataUpdate" href="#">Update</a><br/>
                <a class="dataCancel" href="#">Cancel</a>
            </td>
        </tr>
    </script>
  
    <!-- Simple stylesheets for the table and rows -->  
    <style type="text/css">
  
        table.dataTable
        {
            width: 500px;
            border-collapse: collapse;
        }
        table.dataTable th, table.dataTable td
        {
            border: 1px solid #888;
            text-align: left;
            vertical-align: top;
            padding: 6px;
        }
        tr.dataEditRow
        {
            background-color: #f64;
        }
        tr.dataRow:hover
        {
            background-color: #cef;
        }
    </style>
        
    <!-- Target div for rendered templates -->
    <div id="output"></div>
    
    <!-- Chatter feed, why not? -->
    <chatter:feedWithFollowers entityId="00530000004Fvm1" />

</apex:page>