Reputation: 8188
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>
Upvotes: 1
Views: 2306
Reputation: 10993
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');
Upvotes: 6