Menu
I'm experimenting with a jQuery Mobile app that will eventually end up as a non-Web app on a mobile device and so all the content has to be local. For that reason (I think) I need to construct the app in a single page delineated by data-role="page" tags otherwise the ajax loading mechanism in jQuery Mobile doesn't seem to work.
The app will read data from a local storage DB and display it on the page in an unordered list, styled using jQuery Mobile to look like a native app.
In my $(document).ready() function I execute the DB lookup and for each results, I create an <li> tag around my DB results and then call $(".list").append(li_str); where .list is the class of my <ul> tag.
The page renders as if jQuery Mobile isn't present - I see the correct data in each <li> but it doesn't look correct.
Comparing this result with a version where I hard code the <li> tags in the page HTML - it looks like jQuery Mobile modifies the tags and inserts a lot of new classes etc.
Maybe I need to build the page from the DB earlier in the page load cycle? Any suggestions?
954
Neither calling $("changed-parent-element").listview() nor $("changed-parent-element").trigger("create") really worked for me.
In order to change the DOM content multiple times and redo the jQuery mobile styling I needed this:
$("changed-parent-element").listview("refresh");
Version: jQuery mobile 1.0 RC2
142
The problem is this issue. So, change your code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script>
function build_dynamic_content()
{
var num_entries = 5;
for (var i = 0; i < num_entries; ++i)
{
var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
li_str += "<img src=\"" + "icon.png" + "\" />";
li_str += "</li>";
$(".mainlist").append(li_str);
}
}
</script>
</head>
<body>
<div data-role="page" id="list" data-fullscreen="false">
<div data-role="content">
<ul class="mainlist" data-role="listview">
<li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
</ul>
</div>
</div>
<script>build_dynamic_content();</script>
</body>
</html>
Alternately, you can delay creating the list view until all of the elements have been created (as described in the linked thread):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script>
function build_dynamic_content()
{
var num_entries = 5;
for (var i = 0; i < num_entries; ++i)
{
var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
li_str += "<img src=\"" + "icon.png" + "\" />";
li_str += "</li>";
$(".mainlist").append(li_str);
}
}
$(function ()
{
build_dynamic_content();
$('ul.mainlist').listview();
});
</script>
</head>
<body>
<div data-role="page" id="list" data-fullscreen="false">
<div data-role="content">
<ul class="mainlist">
<li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
</ul>
</div>
</div>
</body>
</html>
Sorry for code dumps; I couldn't get this working in jsfiddle.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
