Home/ Questions/Q 3941058
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T00:29:41+00:00

I’m experimenting with a jQuery Mobile app that will eventually end up as a

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0