JQuery Mobile listview not formatted as mobile

Question

Having trouble with dynamic not formatting correctly - I get standard listview and not MOBILE format. I'm using .listview refresh as in other pages but not same results?

<div data-role="page" data-theme="b" id="today" data-add-back-btn="true">
    <div data-role="header">
        <h1>-TODAY-</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="b" id="subToday">  
        <!-- CONTENT LOADED VIA AJAX -->        
    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div>

jQuery:

function doToday(action, xuser, xpwd, xcode) {
    if (!$('#subToday').data('loaded')) {
        $('#subToday #myWC').remove();
        $('#subToday #month').remove();
        $('#subToday').append('<div id="progress">Loading Today...</div>');
        $.get('https://www.myserver.net/servlet/ServletController?device=stdbrowser&action=doBeginLogin',

        function (data) {
            var jaction = "https://www.myserver.net/servlet/ServletController";
            $.post(jaction, {
                device: "stdbrowser",
                action: "doLogin",
                j_username: xuser,
                j_password: xpwd,
                j_accessCode: xcode,
                j_host: jaction
            }, function (data) {
                var jsessionid = sessionStorage.jsid;
                var prefix = sessionStorage.jsid_prefix;
                var doAction = "https://" + prefix + ".myserver.net/servlet/ServletController;jsessionid=" + jsessionid + "?action=" + action;

                $.get(doAction, function (data) {

                    $('#subToday').append('<div class="singleDay"></div>');
                    $('#subToday .singleDay').append('<ul data-role="listview" id="test"><li>TEST</li><li>IS NOT</li><li>GOOD</li></ul>');
                    $('#subToday #progress').remove();
                    $('#test').listview('refresh');

                });
            });
            return true;
        });
    };
};

<div data-role="content" data-theme="b" id="calToday" class="ui-content ui-body-b" role="main"> 
        <!-- CONTENT -->    
    <div id="month"><ul data-role="Listview" class="xyzul"></ul>
<li style="text-align:left"><a title=""><span title="" style="background-color:#">john was here!</span></a></li>
<ul data-role="Listview" class="xyzul"><li><a title="9/1/2013">9/1/2013 Sunday</a></li>        </ul>
<ul data-role="Listview" class="xyzul"><li><a title="9/2/2013">9/2/2013 Monday</a></li>   </ul>
<ul data-role="Listview" class="xyzul"><li><a title="9/3/2013">9/3/2013 Tuesday</a></li>    </ul><li style="text-align:left"><a title=""><span title="" style="background-color:#008000">07:00,24hrs: B Shift /.../E704/RS704/Firefighter #2 (pp)</span></a></li><li style="text-align:left"><a title="6989152"><span title="6989152" style="background-color:#008000">24hrs Mvd,  07:00 - 07:00 /.../M725/Firefighter (pp)</span></a></li>
<ul data-role="Listview" class="xyzul"><li><a title="9/4/2013">9/4/2013 Wednesday</a></li></ul>
<ul data-role="Listview" class="xyzul"><li><a title="9/5/2013">9/5/2013 Thursday</a></li></ul>
<ul data-role="Listview" class="xyzul"><li><a title="9/6/2013">9/6/2013 Friday</a></li></ul><li style="text-align:left"><a title=""><span title="" style="background-color:#">Pay Date</span></a></li><li style="text-align:left"><a title=""><span title="" style="background-color:#008000">07:00,24hrs: B Shift /.../E704/RS704/Firefighter #2 (pp)</span></a></li><li style="text-align:left"><a title="6989152"> <span style="color:#000000"> <span title="6989152" style="background-color:#FFFFFF">24hrs,  07:00 - 07:00 /.../E704/Firefighter #4 (pp)</span></span></a></li>
<ul data-role="Listview" class="xyzul"><li><a title="9/7/2013">9/7/2013 Saturday</a></li></ul>

Answer 1

Whenever a jquery element is added dynamically, the element needs to be refreshed for the styling to take effect. The format is:

$(selector).elementName("refresh");

so in your case it would be

$("#movies").listview("refresh");