Adding ListView Dynamically Wont Render jQuery Mobile CSS

Question

I am adding a listview with list items to a jQuery mobile collapsible grid. Here is my Default.js code

$(document).ready(function () {


    var appNames = getApprovalNames(phone, pin);

    for (var i = 0; i < appNames.length; i++) {

        var header = '<h3>' + appNames[i].Name + '</h3>';

        var ulHeader = '<ul data-role="listview" id="myAppsSectionGridTable">';

        var approvals = getApprovalInformation(phone, pin, appNames[i].Name);

        var listArray = new Array();


        for (var j; j < approvals.length; j++) {

            var link = '<li><a href="' + 'NickData' + '"' + '><img src="';
            var detailHeader = '" alt="" class="ui-li-icon"/>' + '<h3>' + 'NickData' + '</h3>';
            var detail = '<p>' + 'NickData' + '</p>' + '</a>' + '</li>';

            var list_item = link + detailHeader + detail;

            listArray.push(list_item);

        }

     var entire_list = null;

     for (var y in listArray) {

        entire_list = entire_list + listArray[y];

    }

    $('#accMain').append(header + ulHeader + entire_list + '</ul>');

    }   

});

This code displays the data on the screen but with no jQuery mobile css anywhere on the screen. Also when I look at it in the source, I do not see my newly created markup in there. Am I adding this in the wrong event or something? If I just hardcode the markup in the page everything works fine. Its something to do with dynamically adding jQuery mobile markup.

<asp:Content ID="HContent" ContentPlaceHolderID="HeadContent" runat="server">

<script src="Js/Pages/Default.js" type="text/javascript"></script>

</asp:Content>
<asp:Content ID="THContent" ContentPlaceHolderID="TopHeaderContent" runat="server">
    <h1>
        Applications</h1>
</asp:Content>
<asp:Content ID="MContent" ContentPlaceHolderID="MainContent" runat="server">

 <div id="accMain" data-role="collapsible" data-inset="false" data-collapsed="false">

 </div>

</asp:Content>

This master page body for this is..

<body>

<div data-role="page" data-theme="b">

    <div data-role="header" data-position="fixed">

         <asp:ContentPlaceHolder ID="TopHeaderContent" runat="server"></asp:ContentPlaceHolder>


    </div><!-- /header -->

    <div data-role="content">   

 <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
    <asp:ContentPlaceHolder ID="FooterContent" runat="server"></asp:ContentPlaceHolder>


    </div><!-- /footer -->

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

</body>

Jack · Accepted Answer · 2012-08-28 16:34:15Z

6

You need to call the listview method

$('#mylist').listview()

If you are just adding content to an existing listview then call the refresh method

$('#mylist').listview('refresh');

Sometime you may need to call it in your pageshow event, something like the following

 $('#myPage').on('pageshow', function() {
     try 
    {
       $('#mylist').listview('refresh');
    } catch (e) {
     $('#mylist').listview();
    }
});

If you are adding multiple widgets/items that need to be enhanced then you can try triggering the create event

$('#myPage').trigger('create');

edited Aug 28, 2012 at 16:34

answered Aug 28, 2012 at 15:56

Jack

11k13 gold badges52 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Nick LaMarca Over a year ago

do I fire the pageshow event after the document ready for the page?

Jack Over a year ago

JQM fires the pageshow event, the example I gave is just to bind to it, as long as your page is already in the DOM you can bind to it before you add your list.

Nick LaMarca Over a year ago

the collapsiblelist does not render either. Do I have to somehow refresh that too??

Jack Over a year ago

If you have different items that need to be enhanced by JQM, try triggering the create method after you add them to your page like $('#myPage').trigger('create'); that should tell JQM to enhance everything on the page.

Nick LaMarca Over a year ago

I tried the refresh but am getting the same result,data there but markup not rendering properly

|

Collectives™ on Stack Overflow

Adding ListView Dynamically Wont Render jQuery Mobile CSS

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related