Report jqMobile Problem

by ironicmuffin

HTML

<!DOCTYPE html>
<html>
<head>   

    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta name="viewport" content="width=980, initial-scale=1, user-scalable=no"> 


    <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.js" type="text/javascript"></script>    
 

    <link href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.css" rel="stylesheet" type="text/css" />    
    <link href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.min.css" rel="stylesheet" type="text/css" />
</head>

<body>   
    <div id="page-home" data-role="page" data-theme="a">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>My Report</h1>
        <div class="ui-grid-a">
            <div class="ui-block-a">
               <a id="report-options-button" href="#" style="margin: 0;" data-role="button" data-theme="e" data-icon="gear" data-mini="true" data-corners="false">Report Options</a>
            </div>
            <div class="ui-block-b">
                <a id="refresh-data-button" href="#" style="margin: 0;" data-role="button" data-theme="e" data-icon="refresh" data-mini="true" data-corners="false">Refresh Data</a>
            </div>
        </div>
        <div id="report-options-wrapper" class="ui-grid-b" style="display: none;">
            <div class="ui-block-a" style="padding: 0 10px;">
                <label for="ddlStartDate">Ad Start Date</label>
                <select id="ddlStartDate" data-mini="true" data-theme="e">
                         <option value="-1">All Dates</option>  
                </select>
            </div>
            <div class="ui-block-b" style="padding: 0 10px;">
                <label for="ddlDepts">Department</label>
                <select id="ddlDepts" data-mini="true" data-theme="e">
                    <option value="-1">All Departments</option>                   
                </select>
            </div>
  ...

CSS

/*@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {*/
    html 
    {
        width: 100% ! important;
        height: 100% ! important;
        /*background-color: #aaa ! important;*/
    }
    
    body 
    {
        /*width: 1024px ! important;
        height: 655px ! important;*/
    }
/*}*/

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 3px 0;
    display: block;
    font-size: 12px;
}

.ui-content {
    padding: 0;
}

.ui-li-divider {
    padding: .5em 5px;
}

.ui-collapsible-heading {
    margin: 0;
}

#report-options-wrapper label {
    font-size: 12px;
}

#report-data-content .ui-collapsible-content {
    padding: 0;
}

#report-filters-wrapper .ui-collapsible-content  {
    margin: 0;
    padding: 0;
}

#report-data-content .ui-listview, #report-filters-wrapper .ui-listview {
    margin: 0;
}

#report-data-content .ui-grid-a > :nth-child(n) {
    margin-right: 0;
}

#report-data-content .ui-grid-b > :nth-child(n) {
    margin-right: 0;
}

#item-grid .ui-grid-b > .ui-block-a,
#item-grid .ui-grid-b > .ui-block-b,
#item-grid .ui-grid-b > .ui-block-c {
    padding: 2px 3px;
    text-wrap: none;
}

#report-data-content .ui-grid-b > .ui-block-a {
    width: 10%;
    text-align: right;
}

#report-data-content .ui-grid-b > .ui-block-b {
    width: 25%;
}

#report-data-content .ui-grid-b > .ui-block-c {
    width: 65%;
    border: none;
}

#item-grid .ui-collapsible-heading {
    margin: 0;
}

#item-grid .ui-collapsible-content {
    margin: 0;
    padding: 0;
}

#item-grid .ui-listview {
    /*margin-left: 5px;*/
}

.data-row, .data-row-alt {
    font-weight: bold;
    background-color: #ddd;
}
.data-row-alt, .store-grid-data-row-alt {
    background-color: #FFF;
}

.data-row div h4, .data-row-alt div h4 {
    font-size: 10px;
    padding: 0 3px;
    margin: 2px 0;
    border-right: 1px solid #aaa;
    border-right-color: rgba(50,50,50,.3);
}

.data-row-selected {
   ...

JavaScript

$(function() {
    $("#report-options-button").on("click", function() {
        $("#report-options-wrapper").toggle();
        //Index.RefreshZeroMovementData(false);
    });
    
            $("#refresh-data-button").on("click", refreshData);
    
    function refreshData() {
        $("#item-grid, #store-grid").children().remove();
        $.mobile.loading('show', { text: "Loading report...", textVisible: true });
    $("#item-grid").html('<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" class="grid_16 item-grid-header" >            <h3>My Dept</h3>            <ul id="1" data-role="listview" data-inset="false" data-theme="c">                                   <li class="grid_16" id="1234">                        <div class="grid_1 alpha item-grid-cell" style="text-align: center;"><h4>0001</h4></div>                        <div class="grid_3 item-grid-cell" style="text-align: center;"><h4>1234</h4></div>                        <div class="grid_8 omega item-grid-cell"><h4>My Item</h4></div>                        <div class="grid_4 omega item-grid-cell"><h4>4321</h4></div>                    </li>                                 </ul>        </div><div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" class="grid_16 item-grid-header" >            <h3>My Dept</h3>            <ul id="1" data-role="listview" data-inset="false" data-theme="c">                                   <li class="grid_16" id="1234">                        <div class="grid_1 alpha item-grid-cell" style="text-align: center;"><h4>0001</h4></div>                        <div class="grid_3 item-grid-cell" style="text-align: center;"><h4>1234</h4></div>                        <div class="grid_8 omega item-grid-cell"><h4>My Item</h4></div>                        <div class="grid_4 omega item-grid-cell"><h4>4321</h4></div>                    </li>                                 </ul>        </div>').trigger('create');
       ...