Hi, there.

I've been struggling to display JSON data from server on the fly on the page using this Jquery plugin, Jtemplate. It seems JSON response is all working out fine, but somehow Jtemplate is biting me in the back. Here are HTML the codes.

Code:
<html>
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="jquery-jtemplates.js"></script>
    <script type="text/javascript">
		$(document).ready(function()
		{
			$("#button").click(function()
			{
				var catid=$('#category').val();
				var url='listprintrpc.php?category_id='+catid;
				
				$.ajax(
				{
					url: url,
					type: 'GET',
					dataType: 'json',
					error: function(request, status, error)
					{
						$("#container").html(request.statusText);
					},
					success: function(data)
					{
						$("#container").setTemplateURL('template.htm');
						$("#container").processTemplate(data.d);
					}
				});		
			});
		});
    </script>
</head>
<body>
    <form id="form1">
        <div>
            <input id="category" type="text" /><input id="button" type="button" value="Go">
            <div id="container" style="clear: both;"></div>
        </div>
    </form>
</body>
</html>
And below is the template HTML code.
Code:
<table border="1" cellpadding="3" cellspacing="2">
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Business name
            </th>
            <th>
                Business address
            </th>
            <th>
                Busienss webpage
            </th>
        </tr>
    </thead>
    <tbody>
        {#foreach $T.d as Customer}
            <tr>
                <td>
                    {$T.Customer.first}
                </td>
                <td>
                    {$T.Customer.businessname}
                </td>
                <td>
                    {$T.Customer.businessaddress}
                </td>
                <td>
                    {$T.Customer.businesswebpage}
                </td>
            </tr>
        {#/for}
    </tbody>
</table>
According to firebug FF addon, this is the JSON response from server.
Code:
{"jewel":{"first":"Aaron","last":"","businessname":"Pricegems","businessaddress":"274E Sunset Avenue \u2022 Unit 343","businesscity":"Suisun City","businessstate":"CA","businesszip":"94585","businesscountry":""}}
Lastly, the error message on the template file in Firebug is
Code:
$T is undefined
[Break On This Error] eval(function(p,a,c,k,e,r){e=function(...jTemplatesDebugMode'.split('|'),0,{}))
I'm guessing there is some error in parsing JSON response lurking around, but I can't quite identify it. Although I presume the error lies either
Code:
{#foreach $T.d as Customer} in my template
or,
Code:
$("#container").processTemplate(data.d);
Any suggestions will be highly appreciated. It's been eating me alive for more than a day so far. Thank you in advance as always.