jquery-load-json
Version:
jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM.
114 lines (98 loc) • 5.21 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Displaying details of the single JSON object</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../src/jquery.loadJSON.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
$('div#data').loadJSON('data'+id+'.js');
});
</script>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="scripts/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="scripts/shThemeDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body>
<div id="page-wrap">
<a href="http://code.google.com/p/jquery-load-json/" alt="Home">Home</a>
<div id="contact-area">
<a href="list.html">Back to the list</a>
<h1>Displaying details about the single JSON object</h1>
<h2>Live example</h2>
<p>JQuery loadJSON plugin enables you to bind a single object to the HTML template. This litterally represent loading JSON object into the HTML code.
In the example below is shown how a single JSON object is bound to the static HTML code:
</p>
<div id="data">
<br style="clear:both" />
<h1 id="Name" style="float:left;margin-right:40px"></h1>
<img id="Logo" style="float:left" alt="" src=""/>
<br style="clear:both"/>
<label for="Address">Address:</label>
<span id="Address"></span>
<br style="clear:both"/>
<label for="Contact">Contact by:</label>
<span id="Contact"></span>
<br style="clear:both"/>
<label for="Town">Town</label>
<span id="Town"></span>
<br style="clear:both"/>
<label for="Country">Country:</label>
<ul><li class="Country"></li></ul>
<br style="clear:both"/>
<label for="IsFeatured">Is Featured:</label>
<span id="IsFeatured"></span>
<br style="clear:both"/>
<br/>
<form action="edit.html" method="get">
<input type="hidden" id="ID" name="ID"/>
<input type="submit" value="Edit" class="submit-button"/>
</form>
</div>
<br /><br />
<h2>Implementation</h2>
<p>HTML template that will be populated with JSON object should be defined first. HTML elements in this template should have id
attributes that match properties of the JSON object that will be loaded into the HTML code. Example of the plain HTML code that can be used as a template is shown below:</p>
<pre class="brush: xml;">
<div id="data">
<h1 id="Name"></h1>
<label for="Address">Address:</label>
<span id="Address"></span>
<label for="Contact">Contact by:</label>
<span id="Contact"></span>
<label for="Town">Town</label>
<span id="Town"></span>
<form action="edit.html" method="get">
<input type="hidden" id="ID" />
<input type="submit" value="Edit" class="submit-button"/>
</form>
</div>
</pre>
<p>JSON object that will be loaded into the HTML code shown above should have properties that matches id attributes
of the elements above. Example of such kind of JSON object is shown below:</p>
<pre class="brush: js;">
data = {
"ID":17,
"Name":"Emkay Entertainments",
"Address":"Nobel House, Regent Centre",
"Town":"Lothian",
"Contact":"Phone"
}
</pre>
<p>JSON object 'data' is bound to the HTML code within the DIV tag with an id "data" using the following line:</p>
<pre class="brush: js;">
$('div#data').loadJSON(data);
</pre>
<p>JQuery loadJSON plugin will take JSON object (data) and put properties of the object as a content of the HTML elements
where ids of the elements match the names of the fields in the JSON object.</p>
<a href="list.html">Back to the list</a>
</div>
</div>
</body>
</html>