jQuery Mobile stylesheet not applied to HTML snippet inserted into document

jQuery Mobile stylesheet not applied to HTML snippet inserted into document

I am trying to insert a simple 4-column grid using the Layout Grids ( http://jquerymobile.com/test/docs/content/content-grids.html) sample.

My grid displays as a plain vanilla HTML list. The jQuery mobile stylesheet is not applied. If I recreate the page as static HTML (see example copied below) and load it into a browser, the styles are applied. This leads me to conclude that HTML nodes inserted after the initial page load do not have styles applied to them despite having the required CSS class tags.

Note: I link to this page via a menu, The entry for this page has a rel="external" tag applied.
        <li><a href="CalendarWeek02.aspx" rel="external">Weekly Schedule</a></li>


Here's a copy of my static sample:



<!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" xml:lang="en">
<head>
<title>Weekly Calendar</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />

<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />  
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 

<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="all" /></head>


<body>
    <form method="post" action="CalendarWeek02.aspx" id="ctl01">


    <script type="text/javascript" id="methodAddLoadEvent">
        var hiddenUserName = "";
        var hiddenDeviceLabel = "";

        ///The addLoadEvent function executes on Page Load 
        addLoadEvent(function ()
        {
            hiddenUserName = document.getElementById("hiddenUserName").value;
            hiddenDeviceLabel = document.getElementById("hiddenDeviceLabel").value;

            var currentTime = getQuerystring('calendardate', '');
            if (currentTime == '')
                currentTime = new Date().toDateString();

            var startDate = new Date(currentTime);      //makes startDate a Date object
            startDate.setDate(startDate.getDate() - 7); //and allows us to subtract 7 days
            var endDate = new Date(currentTime);
            endDate.setDate(endDate.getDate() + 7);

            showWeeklyCalendar(hiddenUserName, startDate, endDate);
        });

    </script>

    <script type="text/javascript" id="methodsMisc">

        function showWeeklyCalendar(hiddenUserName, startDate, endDate) 
        {
            document.getElementById("loaderImg").style.display = "block";
            ControllerWS.GetDailyActivityTable03(hiddenUserName, startDate, endDate, hiddenDeviceLabel
                                                , onWeeklyCalendarComplete);
        }

        function onWeeklyCalendarComplete(result)
        {
            document.getElementById("loaderImg").style.display = "none";
            document.getElementById("modalContent").innerHTML = result;
            document.getElementById("modalDiv").style.display = "block";
        }

        function closeModal()
        { document.getElementById("modalDiv").style.display = "none"; }
    </script>

    <div data-role="page" data-transition="fade"> 
<div data-role="header" data-theme="b" data-backbtn="false"> 
<h1>Activity Schedule</h1> 
<a href="MainMenu.aspx" data-icon="home" data-iconpos="notext" data-direction="reverse" 
            class="ui-btn-right jqm-home">Home</a> 
</div>  
    
    <img id="loaderImg" src="images/loader.gif" alt="" style="display:none;margin:0 auto;" />

    <div id="modalDiv" style="display:block;" class="modalCalendarWeek">
        <span id="MainContent_lblModalDivHeader" class="header"></span>
        <div class="modalContentWrapper">
            <div id="modalContent">


<!--The following HTML is inserted by the showWeeklyCalendar method (above)
---------------------------------------------------------------------------->

<CENTER><A href="CalendarWeek02.aspx?calendardate=2/17/2011" rel="external">
<IMG id="imgPrevPeriod" src="images/ScrollUp.gif" alt="Previous Period" 
class="PeriodButton"></A></CENTER>

<div data-role="content"> <H6>Schedule from Thu, Feb 24, 2011 to Thu, Mar 10, 2011</H6>    <ul data-role="listview">
<li data-role="list-divider">Activities scheduled for 2/24/2011</li> 
            <li> 
                <div class="ui-grid-a">
                <div class="ui-block-a">Job</div>
                <div class="ui-block-b">Activity</div>
                <div class="ui-block-c">Vendor</div>
                <div class="ui-block-d">&nbsp;</div>
                </div>
            </li> 
            <li data-role="list-divider">Activities scheduled for 2/25/2011</li> 
            <li> 
                <div class="ui-grid-a">
                <div class="ui-block-a">Job</div>
                <div class="ui-block-b">Activity</div>
                <div class="ui-block-c">Vendor</div>
                <div class="ui-block-d">&nbsp;</div>
                </div>
            </li> 
            <li data-role="list-divider">Activities scheduled for 2/28/2011</li> 
            <li> 
                <div class="ui-grid-a">
                <div class="ui-block-a">Job</div>
                <div class="ui-block-b">Activity</div>
                <div class="ui-block-c">Vendor</div>
                <div class="ui-block-d">&nbsp;</div>
                </div>
            </li> 

          </ul> 
</div> 
<CENTER><A href="CalendarWeek02.aspx?calendardate=3/17/2011" rel="external">
<IMG id="imgNextPeriod" src="images/ScrollDn.gif" alt="Next Period" 
class="PeriodButton"></A></CENTER>

      <input type="hidden" name="ctl00$MainContent$hiddenCalendarDate" id="MainContent_hiddenCalendarDate" />
      <div data-role="footer" data-theme="b" data-backbtn="false"> 
       <a href="MainMenu.aspx" data-icon="home" data-iconpos="notext" data-direction="reverse" 
                        class="ui-btn-right jqm-home">Home</a> 

<!--end HTML insert-->

      </div>  
    </div> <!--/page-->
            </div>
        </div>
    </div>

    <input type="hidden" name="ctl00$hiddenUserID" id="hiddenUserID" value="39" />
    <input type="hidden" name="ctl00$hiddenDeviceLabel" id="hiddenDeviceLabel" value="iPhone" />
    </form>
</body>
</html>