SOLVED: Document initializers ignored when embedded in tab

SOLVED: Document initializers ignored when embedded in tab

Hello!
I am trying to get up to speed on using the JQuery UI, but I'm stumped by one issue. I have a page that displays a modal dialog, using the following code to initialize it. This is working just fine:

// code in page1.html
jQuery(document).ready( function()
{       
  jQuery("#myButton").click( showDialog );

  //variable to reference window
  $myWindow = jQuery('#myDiv');

  //instantiate the dialog
  $myWindow.dialog({ height: 350,
                     width: 400,
                     modal: true,
                     position: 'center',
                     autoOpen:false,
                     title:'Hello World',
                     overlay: { opacity: 0.5, background: 'black'},
                     buttons:
                     {
           Cancel: function()
                        {
                          $myWindow.hide();
                          $myWindow.dialog("close");
                        },
           },
    });
});

//function to show dialog   
var showDialog = function()
{
  //if the contents have been hidden with css, you need this
  $myWindow.show();
  //open the dialog
  $myWindow.dialog("open");
}

</script>
</head>

<body>

<input id="myButton" name="myButton" value="Click Me" type="button" class="ui-button ui-state-default ui-corner-all"/>

<div id="myDiv" style="display:none">
   <form>
   <fieldset>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
   </fieldset>
   </form>
</div>

</body>
</html>

However, when I try to display this page in a tab, the initialization code doesn't get called and the dialog doesn't work:

// part of tabtest1.html
<head>
<script type="text/javascript">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

jQuery(document).ready(function()
{
  var tabs = $('#tabs').tabs();
});
</script>

</head>   

<body>

<div id="tabs">
  <ul>
    <li><a href="test2.html">Test Tabs</a></li>
    <li><a href="#stuff1">Stuff1</a></li>
    <li><a href="#stuff2">More Stuff</a></li>
  </ul>
</div>
<div id="stuff1">
Some stuff
</div>

<div id="stuff2">
Some more stuff
</div>

The contents of test2.html is displayed perfectly, but no javascript from test2.html is called. I have seen other discussions of this issue on other forums, but no clear description of an answer. Thanks in advance!