This simple template test works once and subsequent times fails. The error is 'Object doesn't support this property or method on line '$("#pictureTemplate").tmpl(pix).appendTo("#contents");'. The reason for putting in $("#contents").empty(); is that it otherwise keeps adding pictures to the page for every access. If I do a refresh and try again it works again. It seems as if something is lost and only restored with a refresh. I don't have a clue what it can be. Here is the code:
index2.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<title>Test</title>
	<link type="text/css" href="/css/global.css" rel="stylesheet"  />
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>  
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>  
	<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAt-sgV5grSeAHkFvq5PB3rhSpdtD0XiOpSLi5J5-7xVP8rmJi_xTTGYHDICpmosUF-V_bKFHfziFjGQ"></script>
	
	<script>
		google.setOnLoadCallback(function(){
			$('#main').load("home.php");
	    	return false;
		});
	</script>
	
</head>
<body id="home">
	<?php include("navbar2.php"); ?>
	<div id="main"></div>
</body>
picture_test.php
Code:
<h1>PICTURES</h1>
<div id="contents"></div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script>
	var pix = [
		{figure: "figure", picfile:"bp/p01.jpg", alternative: "pic1", caption: "Picture 1"}, 
		{figure: "figurev", picfile:"bp/p05.jpg", alternative: "pic2", caption: "Picture 2"}			
		];
		
	$.get("/tmpl/_picture.tmpl.htm", function(templates) {
		$("#contents").empty();
		$("#contents").append(templates);
		$("#pictureTemplate").tmpl(pix).appendTo("#contents");
	});	
</script>
\tmpl\_picture.tmpl.htm
Code:
<script id="pictureTemplate" type="x-jquery-tmpl">
<div class="${figure}">
	<img src="/pics/${picfile}" alt="${alternative}"/>
	<p>${caption}</p>
</div>
</script>
I used Firebug and found out that the the contents of "contents" <div> after a success was
Code:
<div id="contents">
 <script id="pictureTemplate" type="x-jquery-tmpl">
 <div class="figure">
  <img alt="pic1" src="/pics/bp/p01.jpg">
  <p>Picture 1</p>
 </div>
 <div class="figurev">
  <img alt="pic2" src="/pics/bp/p05.jpg">
  <p>Picture 2</p>
 </div>
</div>
and after a failure

Code:
<div id="contents">
 <script id="pictureTemplate" type="x-jquery-tmpl">
 <div class="${figure}">
  <img src="/pics/${picfile}" alt="${alternative}"/>
  <p>${caption}</p>
 </div>
 </script>
</div>
which I think means that parameters are not filled in, hence the empty page. Any suggestions?