JQuery Mobile listview not formatted as mobile

0 votes

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;
        });
    };
};

enter image description here

<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>

Aug 5 in Web Development by gaurav
• 17,580 points
9 views

1 answer to this question.

0 votes

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");
answered Aug 5 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
0 answers

jQuery: Test if checkbox is NOT checked

I'm having trouble figuring this out. I ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
21 views
0 votes
0 answers

Jquery array.push() not working

I have been trying to add variables ...READ MORE

Jul 1 in Web Development by gaurav
• 17,580 points
36 views
0 votes
0 answers
0 votes
0 answers
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
190 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
601 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Error: Global Variable is not accessable to local function

Hey kartik, A variable declared outside a function has a ...READ MORE

answered Feb 19, 2020 in PHP by Niroj
• 82,740 points
283 views
0 votes
1 answer

Loading gif in jQuery ajax call is not showing

Create a div with your image. Make it ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
36 views
0 votes
1 answer

jQuery Load function not loading the file

The jQuery load() method allows HTML or ...READ MORE

answered Jun 29 in Web Development by rajatha
• 7,040 points
143 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP