1

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>

1 Answer 1

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');
9
  • 1
    do I fire the pageshow event after the document ready for the page? Aug 28, 2012 at 16:03
  • 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.
    – Jack
    Aug 28, 2012 at 16:08
  • the collapsiblelist does not render either. Do I have to somehow refresh that too?? Aug 28, 2012 at 16:10
  • 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.
    – Jack
    Aug 28, 2012 at 16:14
  • I tried the refresh but am getting the same result,data there but markup not rendering properly Aug 28, 2012 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.