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.
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
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