CodePaste Logo
New Snippet New Snippet Recent Snippets Recent Snippets My Snippets My Snippets Web Code Search Snippets Search
Sign inor Register
Language: HTML

jQuery client-side templates with jqote and Asp.Net MVC

806 Views
Copy Code Show/Hide Line Numbers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Testing Client-Side Templates</title>
</head>
<body>
 
    <form id="people_input">
        <label for="name">Name: </label><input type="text" name="name" /><br />
        <label for="age">Age: </label><input type="text" name="age" /><br />
        <input type="submit" value="Add" />
    </form>
 
    <table id="person_table">
        <tr>
            <th>Name</th><th>Age</th>
        </tr>    
    </table>
 
    <script type="text/html" id="template"> 
    <![CDATA[
        <tr>
            <td><$= this.name $></td><td><$= this.age $></td>
        </tr>    
    ]]>
    </script> 
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.jqote.js"></script>
 
    <script type="text/javascript">
 
        $(document).ready(function () {
 
            $('form#people_input').submit(function (e) {
                var data = { name: $('input[name=name]').val(), age: $('input[name=age]').val() };
                $('table#person_table').append($('#template').jqote(data, '$'));
                e.preventDefault();
            });
 
        });    
    
    </script>
</body>
</html>
by Liam McLennan
  March 02, 2010 @ 11:52pm
Tags:

Add a comment


Report Abuse
brought to you by:
West Wind Techologies



If you find this site useful and use it frequently please consider making a donation to support this free service.
Donate