-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathcategories-ajax.html
156 lines (129 loc) · 5.54 KB
/
categories-ajax.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!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>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>