Inserting elements into the DOM in a jQuery Mobile based page_问答_开发者

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 Mob开发者_开发知识库ile 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?

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

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.

Matt's answer is not a general answer to the question. I've already covered that a lot of times in other questions.

The above works with a listview, but not with any content in general.

To add elements to DOM in jQuery Mobile you need to know the .page() function.

I did a tutorial on that http://jquerymobiledictionary.pl/faq.html