PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

Hello,
I have to generate the contents of a dialog box on the fly (as I need to query the database for info first and then populate the dialog with it), but my problem is that the dialog box is only styled the first time it comes up.  In the example below, (if you don't mind building and running on your sim), you click on the "New Dialog" at the top right, take a look at the dialog, it is styled by jQueryMobile which is good.  Cancel out of it, and then click on the "New Dialog" button again and you'll see that the dialog is not styled at all.  I'm guessing that something is being cached somewhere, any ideas? or workarounds? 

<html>
<head>
	<title> Test </title>
		<meta id="viewport" name="viewport" content="width=width=1024,height=600, initial-scale=1, user-scalable=no" />
	<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
	<link href="jquery.mobile1.0a3.css" rel="stylesheet" type="text/css" />
	<script src="jquery-1.5.min.js"></script>
	<script src="jquery.mobile1.0a3.js"></script>
	<script>
		function newDialog()
		{
			console.log('got here');
			var ele = document.getElementById("newDialog");
				var output = "<label for='txtMessage' class='text'>This, and the text box & button is 'styled' the first time, but not subsequent times</label>";
				output += "<textarea id='txtMessage' rows='1' cols='50'></textarea> <br/>";
				output += "<a href='#main' data-role='button' data-inline='true' data-rel='back'>Cancel</a>";
				if (ele)
				{
					ele.innerHTML = output;
					$('#newDialog').page();
				}
		}
	</script>
</head>

<body>
	<div data-role="page" id="main">
		<div data-role="header" data-position="inline" > <!--data-backbtn="false" -->
			<h1>Hola</h1>
			<a href="#newDialogPage" data-rel="dialog" data-transition="pop" data-icon="plus" class="ui-btn-right" onclick="newDialog()">New Dialog</a>
		</div>
	</div> <!-- /page main -->
	
	<!-- NEW dialog -->
	<div data-role="page" id="newDialogPage">
		<div data-role="header" data-position="inline"><h1>Dialog</h1></div>
		<div data-role="content" id="newDialog"></div>
	</div> <!-- /page newDialog -->

</body>
</html>