JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://jquerymobile.com/test/js/"></script>
</head>
<body>
<div id="seyzListPage" data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
<ul data-role="listview">
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div id="seyzDetailPage" data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" id="detail">
<p>Page content goes here.1</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
JavaScript
var json_results = {
"rows": [
{
"emp_id": "1",
"emp_code": "201B",
"emp_name": "John"
},
{
"emp_id": "2",
"emp_code": "201D",
"emp_name": "Peter"
}
]
};
$('#seyzListPage').live('pageshow', function(){
listItems = $('#seyzListPage').find('ul');
$.each(json_results.rows, function(key) {
html = '<li><a href="#seyzDetailPage?id=' + json_results.rows[key].emp_id +'"rel="external"><h3>'+json_results.rows[key].emp_code+'</h3>';
html += '<p><br> Aiport name: '+json_results.rows[key].emp_name+'</p></a></li>';
listItems.append(html);
});
// Need to refresh list after AJAX call
$('#seyzListPage ul').listview('refresh');
});