Jquery-mobile css is not reflecting on HTML page?

Question

I am using HTML5,Jquery(v1.6.4) and Jquery-mobile(jquery.mobile-1.0.1.js).

I want to populate data dynamically using Jquery. After populating, Page is not displaying properly. Jquery-mobile themes and style-sheets are not effecting on the Page.

Code

Test.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="jquery.mobile.structure-1.0.1.css" type="text/css" charset="utf-8">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"src="jquery.mobile-1.0.1.js"></script>
<script src="main.js" type="text/javascript" charset="utf-8"></script>

<title>Test</title>
 </head>
  <body>
        <div id="test"> </div>
</body>
</html>

main.js code

 $(document).ready(function(){

    $("#test").append("<ul data-role='listview'>"); 
    $("#test").append("<li>Srikanth</li>");
    $("#test").append("<li>Chil</li>");
    $("#test").append("<li>Devi</li>");
    $("#test").append("</ul>");
 });

Please help me out on this.

codemonkey · Accepted Answer · 2012-06-14 09:09:14Z

1

You are dynamically creating a list so you need to tell jQuery Mobile about it and ask it to 'enhance' the content. You do this by calling

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

If you have an existing, enhanced list to which you are adding elements you need to tell JQM to enhance the new content which you do by calling

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

answered Jun 14, 2012 at 9:09

codemonkey

5,2672 gold badges20 silver badges16 bronze badges

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

Comments

user684934 · Accepted Answer · 2012-06-14 08:56:10Z

1

You're appending your li elements to #test, as well as malformed elements (start and end tags for ul).

You need to append your li elements to your ul element, and then append that to your #test element.

(append() works on the DOM, it doesn't just put HTML code into the element like a string.)

So it should look something more like this:

var ul = $("<ul data-role='listview'></ul>");
ul.append("<li>foo</li>");
ul.appendTo("#test");

answered Jun 14, 2012 at 8:56

user684934

Comments

Ionut Flavius Pogacian · Accepted Answer · 2012-06-14 08:58:24Z

0

Please use the absolute path of the files, or at least use ./ to load from the current folder

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./jquery.mobile-1.0.1.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="./jquery.mobile.structure-1.0.1.css" type="text/css" charset="utf-8">

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript"src="./jquery.mobile-1.0.1.js"></script>
<script src="./main.js" type="text/javascript" charset="utf-8"></script>

<title>Test</title>
 </head>
  <body>
        <div id="test"> </div>
</body>
</html>

answered Jun 14, 2012 at 8:58

Ionut Flavius Pogacian

4,81115 gold badges62 silver badges101 bronze badges

Collectives™ on Stack Overflow

Jquery-mobile css is not reflecting on HTML page?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related