jquery-load-json
Version:
jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM.
156 lines (129 loc) • 5.67 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Connected dropdowns</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 () {
$('#Region').loadJSON('regions.js');
$('#Region').change(function() {
var id = $(this).val();
$('#Town').loadJSON('towns' + 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>
<style>
#Town{ width: 100px }
</style>
</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="linq.html">Go to the LINQ example</a>
<h1>Filling the subcategory dropdown via Ajax calls</h1>
<p>JQuery loadJSON plugin can be used to dinamically fill dropdown based on the selected item in primary dropdown. This is common usage in the applications
where you have primary list (e.g.categories or countries) and you need to dinamically populate secondary dropdown.</p>
<h2>Live example</h2>
<p>JQuery loadJSON plugin enables you to bind a list based on the Ajax responses taken from the server side. In the following example, each time the user
select a region, Ajax call loads the related towns from the server and loadJSON plugin loads them into the dropdown list.
</p>
<form name="form_simple" id="form-simple" action="#">
<label for="Region">Region</label>
<select name="Region" id="Region">
<option value="" class="regions"></option>
</select>
<br/>
<br/>
<label for="Town">Town</label>
<select name="Town" id="Town" multiple="multiple">
<option class="towns"/>
</select>
<br style="clear:both"/>
<br/>
</form>
<br /><br /><br /><br />
<h2>Implementation</h2>
<p>HTML code is shown in the following listing:</p>
<pre class="brush: xml;">
<label for="Region">Region</label>
<select name="Region" >
<option value="" class="regions"></option>
</select>
<label for="Town">Town</label>
<select name="Town" id="Town" multiple="multiple" >
<option class="towns" >-</option>
</select>
</pre>
<p>Classes "regions" and "towns in the option tags are used to map option elements that wil be populated with the JSON object that will be loaded into the HTML form shown above should have properties that matches name attributes
of the elements above. Example of JSON object that can be used to fill region list is shown below:</p>
<pre class="brush: js;">
{
"regions":[
{
"value": 1,
"text": "East Europe"
},
{
"value": 2,
"text": "West Europe"
},
{
"value": 3,
"text": "Middle Europe"
}
]
}
</pre>
<p>The only important thing is that name of the array should match the name of the class in the options tags</p>
<p>Example of JSON object that can be used to fill town list is shown below:</p>
<pre class="brush: js;">
{
"towns":[
{
"value": 17,
"text": "Belgrade"
},
{
"value": 18,
"text": "Buchurest"
},
{
"value": 19,
"text": "Moscov"
},
{
"value": 20,
"text": "Kiev"
}
]
}
</pre>
<p>The only important thing is that name of the array should match the name of the class in the options tags</p>
<p>If the region array is placed in the regions.js file, the following line of code will load the dropdown list:</p>
<pre class="brush: js;">
$('#Region').loadJSON('regions.js');
</pre>
<p>If the town array is placed in the towns1.js, towns2.js, towns3.js files, the following code will load the towns dropdown list:</p>
<pre class="brush: js;">
$('#Region').change(function() {
var id = $(this).val();
$('#Town').loadJSON('towns' + id + '.js');
});
</pre>
<p>When region in the dropdown list is changed, this code taks id of the region and loads town(ID).js array into the towns dropdown.</p>
<p>As you might see, connecting dropdowns is easy with loadJSON plugin.</p>
<a href="linq.html">Go to LINQ example</a>
</div>
</div>
</body>
</html>