examples/linq.html

﻿ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Populating dropdowns with Local JavaScript and LINQ</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 src="scripts/jquery.linq.js" type="text/javascript"></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>
	
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
		
		var aoRegions, aoTowns;
		
		/* //Uncomment this line if you want to load JS array via Ajax call
		$('#Region').loadJSON('regions.js');
		$.get("towns.js", function(jsonResponse){
					aoTowns = jsonResponse.towns;
					var id = $('#Region').val();
					var queryResult = $.Enumerable.From(aoTowns)
    										.Where(function (town) { return town.regionid == id })
						    				.OrderByDescending(function (town) { return town.text })
										.ToArray();
					$('#Town').loadJSON({ towns: queryResult} );
				},
			"json");
		*/
		
		aoRegions = [
						{
							"value": 1,
							"text": "East Europe"
						},
						{
							"value": 2,
							"text": "West Europe"
						},
						{
							"value": 3,
							"text": "Middle Europe"
						}
					];
					
		aoTowns = 	[
						{
							"value": 17,
							"text": "Belgrade",
							"regionid": 1		
						},
						{
							"value": 19,
							"text": "Moscov",
							"regionid": 1
						},
						{
							"value": 20,
							"text": "Kiev",
							"regionid": 1
						},
						{
							"value": 21,
							"text": "London",
							"regionid": 2
						},
						{
							"value": 22,
							"text": "Paris",
							"regionid": 2
						},
						{
							"value": 23,
							"text": "Madrid",
							"regionid": 2
						},
						{
							"value": 24,
							"text": "Lisabon",
							"regionid": 2
						},
						{
							"value": 31,
							"text": "Berlin",
							"regionid": 3
						},
						{
							"value": 32,
							"text": "Viena",
							"regionid": 3
						},
						{
							"value": 33,
							"text": "Budapest",
							"regionid": 3
						},
						{
							"value": 33,
							"text": "Prague",
							"regionid": 3
						}
						,
						{
							"value": 33,
							"text": "Warsaw",
							"regionid": 3
						}
					];
		
		$('#Region').loadJSON({ "regions":aoRegions });
		
		$('#Region').change(function() {
							var id = $(this).val();
							var queryResult = $.Enumerable.From(aoTowns)
    										.Where(function (town) { return town.regionid == id })
						    				.OrderByDescending(function (town) { return town.text })
										.ToArray();
							$('#Town').loadJSON({ "towns": queryResult} );
						});

            
        });
    </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="categories-ajax.html">Go To the Ajax example</a>
	<h1>Filling the subcategory dropdown using the local JavaScript</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 JSON array of objects. In this example local variables containing the arrays of regions
		and towns will be used to dinamicaly populate region and town dropdown lists. Each time user changes region, the town array will be filtered by the
		regionid and loaded into the secondary dropdown. For filtering is used <a href="http://linqjs.codeplex.com/">JQuery LINQ</a> library but this is just
		an option.
    </p>

<form name="form_simple" id="form-simple" action="details.html" method="get">

					    <label for="Region">Region</label>
					    <select name="Region" id="Region">
                            			<option value="-2" class="regions">Please select</option>
					    </select>
<br/>
<br/>
					    <label for="Town">Town</label>
					    <select name="Town" id="Town">
                            			   <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;">&lt;label for=&quot;Region&quot;&gt;Region&lt;/label&gt;
&lt;select name=&quot;Region&quot; &gt;
	&lt;option value=&quot;-1&quot; class=&quot;regions&quot;&gt;Pleaase select&lt;/option&gt;
&lt;/select&gt;
&lt;label for=&quot;Town&quot;&gt;Town&lt;/label&gt;
&lt;select name=&quot;Town&quot; id=&quot;Town&quot;&gt;
	&lt;option class=&quot;towns&quot; &gt;-&lt;/option&gt;
&lt;/select&gt;</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;">
	aoRegions = [
					{
						&quot;value&quot;: 1,
						&quot;text&quot;: &quot;East Europe&quot;
					},
					{
						&quot;value&quot;: 2,
						&quot;text&quot;: &quot;West Europe&quot;
					},
					{
						&quot;value&quot;: 3,
						&quot;text&quot;: &quot;Middle Europe&quot;
					}
				];     
        </pre>
		<p>Example of JSON object that can be used to fill town list is shown below:</p>
        <pre class="brush: js;">
	aoRegions = [
			{
				&quot;value&quot;: 17,
				&quot;text&quot;: &quot;Belgrade&quot;
				&quot;regionid&quot;: &quot;1&quot;
			},
			{
				&quot;value&quot;: 18,
				&quot;text&quot;: &quot;Berlin&quot;
				&quot;regionid&quot;: &quot;2&quot;
			},
			{
				&quot;value&quot;: 19,
				&quot;text&quot;: &quot;London&quot;
				&quot;regionid&quot;: &quot;3&quot;
			},
			{
				&quot;value&quot;: 20,
				&quot;text&quot;: &quot;Paris&quot;
				&quot;regionid&quot;: &quot;3&quot;
			}
		]
	}      
        </pre>
		<p>Each town has regionid property that will be used for filtering.</p>
        <p>The following line of code will load the dropdown list:</p>
        <pre class="brush: js;">
	$('#Region').loadJSON({ "regions":aoRegions });
        </pre>
		<p>Note that original array is wraped into the object with "regions" property in order to match this property with the "regions" class
			in the option template.</p>
		<p>The following code will load the towns dropdown list when region is changed:</p>
        <pre class="brush: js;">$('#Region').change(function() {
					var id = $(this).val();
					var queryResult = $.Enumerable.From(aoTowns)
									.Where(function (town) { return town.regionid == id })
									.OrderByDescending(function (town) { return town.text })
								.ToArray();
					$('#Town').loadJSON({ "towns": queryResult} );
				});
        </pre>
        <p>When region is changed, id of the region is taken from the region select list, towns with that region id are filtered from the original array,
			and they are ordered by text property.</p>
        <a href="categories-ajax.html">Back to  the list</a>
</div>
	
	
</div>
			
</body>

</html>