Jquery mobile : Listview doesn't display correctly

Question

am using Jquery mobile 1.4.1. I trying to display a jquery mobile list view but it doesn't display correctly when insert the code using Jquery. The problem is that the jquery doesn't insert the css classes. Here is my code and a screen shot:

<!DOCTYPE html>
<html>
    <head>
        <title>Web service</title>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.1.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.1.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.4.1.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    
        <script src="js/jquery.mobile-1.4.1.min.js"></script>

        <script>
            $(document).ready(function() {
                $.getJSON("http://localhost/WebService/web-service.php?format=json", function(result) {
                    var html = "";
                    $.each(result.posts, function(i, field) {
                        html = html.concat("<li><a href='#'>" + field.post.fullname + "</a></li>");
                    });
                    document.getElementById('list').innerHTML = html;
                });
            });
        </script>
    </head>
    <body>
        <!-- Start of first page -->
        <div data-role="page" id="foo">

            <div data-role="header">
                <h1>Foo</h1>
            </div><!-- /header -->

            <div role="main" class="ui-content">
                <p>I'm first in the source order so I'm shown as the page.</p>
                <p>View internal page called <a href="#bar">bar</a></p>
                <ul data-role="listview" id="list"></ul>

            </div>
            <!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->

        <!-- Start of second page -->
        <div data-role="page" id="bar">

            <div data-role="header">
                <h1>Bar</h1>
            </div><!-- /header -->

            <div role="main" class="ui-content">
                <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
                <p><a href="#foo">Back to foo</a></p>
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
    </body>

</html>

How can i fix it?

possible duplicate of Populating jQuery Mobile ListView with local JSON data — Omar
– Omar, Commented Feb 23, 2014 at 13:54

user3519216 · Accepted Answer · 2014-08-07 10:40:17Z

0

What do you want to show as listview?? are they these three items 1.bar 2.taieb baccouch 3.zahra daqrir than the following code can help you..

<div>
<ul data-role="listview" class="jqm-list">
<li><a><span>bar</span></a></li>
<li><a><span>taieb baccouch </span></a></li>
<li><a><span>zahra daqrir</span></li>
</ul></div>

answered Aug 7, 2014 at 10:40

user3519216

4854 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery mobile : Listview doesn't display correctly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related