jquery-load-json
Version:
jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM.
77 lines (61 loc) • 2.49 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Company Details - jQuery Mobile</title>
<link rel="stylesheet" href="../jquery.mobile-1.0rc2.min.css" />
<script src="../scripts/jquery-1.6.4.min.js"></script>
<script src="../scripts/jquery.mobile-1.0rc2.min.js"></script>
<script src="../../../src/jquery.loadJSON.js"></script>
<script language="javascript" type="text/javascript">
/*$(document).ready(function () {
var id = window.location.href.match("[0-9]+")[0];
$('div[data-role="content"]').loadJSON('data'+id+'.js');
});*/
</script>
<script language="javascript" type="text/javascript">
$( '#detailspage' ).live( 'pageinit',function(event){
var id = window.location.href.match("[0-9]+")[0];
$('div[data-role="content"]').loadJSON('data'+id+'.js');
});
</script>
</head>
<body>
<div id="detailspage" data-role="page">
<div data-role="header">
<h1>Company Details Page</h1>
<a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<h1 id="Name"></h1>
<img id="Logo" alt="" src=""/>
<div data-role="fieldcontain">
<label for="Address">Address:</label>
<span id="Address"></span>
</div>
<div data-role="fieldcontain">
<label for="Town">Town</label>
<span id="Town"></span>
</div>
<div data-role="fieldcontain">
<label for="Country">Country:</label>
<ul><li class="Country"></li></ul>
</div>
<div data-role="fieldcontain">
<label for="IsFeatured">Is Featured:</label>
<span id="IsFeatured"></span>
</div>
<div data-role="fieldcontain">
<label for="Contact">Contact by:</label>
<span id="Contact"></span>
</div>
<a href="list.html" data-ajax="false" data-role="button" data-inline="true" data-icon="arrow-l">Back to list</a>
<a href="edit.html" class="ID" data-ajax="false" data-role="button" data-inline="true" data-theme="b" data-icon="arrow-r" data-iconpos="right">Edit</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Footer content</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>