Geek Answers Handbook

Insert elements into the DOM on jQuery Mobile page

I am experimenting with a jQuery mobile application that will eventually become a non-web application on a mobile device, and therefore all content must be local. For this reason (I think) I need to create an application on one page marked with tags data-role="page", otherwise the ajax loading mechanism in jQuery Mobile does not work.

The application will read data from the local storage database and display it on the page in an unordered list, using jQuery Mobile to look like a native application.

In my function, $(document).ready()I search for the database and for each result I create a tag <li>around the results of my database and then call $(".list").append(li_str);where .listis the class of my tag <ul>.

The page is displayed as if jQuery Mobile is not there - I see the correct data in each <li>, but it does not look right.

Comparing this result with the version where I hardcode the tags <li>on an HTML page - it seems like jQuery Mobile modifies the tags and inserts many new classes, etc.

Perhaps I need to create a page from the database earlier in the page load cycle? Any suggestions?

+5
source share
3 answers

The problem is this problem . 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>

Alternatively, you can defer the creation of the list view until all items are 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>

; jsfiddle.

+5

$("changed-parent-element").listview() $("changed-parent-element").trigger("create") . DOM jQuery , :

$("changed-parent-element").listview("refresh");

: jQuery mobile 1.0 RC2

+9

Matt - . .

, - .

DOM jQuery Mobile, .page().

http://jquerymobiledictionary.pl/faq.html

+4

More articles:


All Articles