Data: camelCasing should not ignore case
[jquery.git] / test / delegatetest.html
blob119b63a73124f14940b2519dd4bbe4f4880241e9
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Event Delegation Tests</title>
5 <script src="jquery.js"></script>
6 <style>
7 table {
8 border-collapse: collapse;
9 empty-cells: show;
11 th {
12 text-align: left;
14 thead td {
15 width: 11%;
17 tbody td {
18 background: #fed;
20 th, td {
21 border: 1px solid #bbb;
23 </style>
24 </head>
25 <body>
26 <h2>Delegate Tests (<span id="fileversion">x</span>)</h2>
28 <table id="changes">
29 <thead>
30 <tr>
31 <th>
32 Controls:
33 </th>
34 <td id="select-one">
35 <select>
36 <option value='one1'>one1</option>
37 <option value='one2'>one2</option>
38 <option value='one3'>one3</option>
39 </select>
40 <select>
41 <option value='two1'>two1</option>
42 <option value='two2' selected="selected">two2</option>
43 <option value='two3'>two3</option>
44 </select>
45 </td>
46 <td id="select-mult">
47 <select multiple="multiple">
48 <option value='multi1'>multi1</option>
49 <option value='multi2'>multi2</option>
50 <option value='multi3'>multi3</option>
51 </select>
52 </td>
53 <td id="checkbox">
54 <input type="checkbox" name="mycheckbox" id="check1"/>
55 <label for="check1">check1</label><br/>
56 <input type="checkbox" name="mycheckbox" id="check2"/>
57 <label for="check2">check2</label><br />
58 <input type="checkbox" name="mycheckbox" id="check3" disabled="disabled"/>
59 <label for="check3">check3</label>
60 </td>
61 <td id="radio">
62 <input type="radio" name="myradio" id="radio1"/>
63 <label for="radio1">Radio1</label><br/>
64 <input type="radio" name="myradio" id="radio2"/>
65 <label for="radio2">Radio2</label><br />
66 <input type="radio" name="myradio" id="radio3" disabled="disabled"/>
67 <label for="radio3">Radio3</label>
68 </td>
69 <td id="file">
70 <input class="file_test" id="file1" type="file"/>
71 </td>
72 <td id="text">
73 <input class='test' value='' id='input' size='10' />
74 <input class='test' value='test' id='input2' size='10' readonly="readonly" />
75 </td>
76 <td id="textarea">
77 <textarea rows='2'></textarea>
78 </td>
79 <td id="button">
80 <button name="mybutton1" id="button1">Button</button><br />
81 <button name="mybutton2" id="button2"><span>Button w/ child</span></button><br />
82 <button name="mybutton3" id="button3" disabled="disabled">Button Disabled</button><br />
83 <button name="mybutton4" id="button4" disabled="disabled"><span disabled="disabled">Button, child Disabled</span></button><br />
84 </td>
85 </tr>
86 </thead>
87 <tbody>
88 </tbody>
89 </table>
90 <p>NOTE: Only IE supports propertychange, beforeactivate, beforedeactivate; buttons do not support change events.</p>
92 <h2>Submit Tests</h2>
93 <table>
94 <tr>
95 <td>
96 Submit each:
97 </td>
98 <td>
99 <form action="" id="text_submit">
100 <input class='test' type='text' value='Key Return To Submit'/>
101 </form>
102 </td>
103 <td>
104 <form action="" id="password_submit">
105 <input class='test' type='password' value=''/>
106 </form>
107 </td>
108 <td>
109 <form action="" id="submit_submit">
110 <input type='submit' value="Click Me To Submit" />
111 </form>
112 </td>
113 <td>$(document).bind('submit')</td>
114 </tr>
115 <tr>
116 <td>Results:</td>
117 <td id='textSubmit' class="red">TEXT</td>
118 <td id='passwordSubmit' class="red">PASSWORD</td>
119 <td id='submitSubmit' class="red">BUTTON</td>
120 <td id='boundSubmit' class="red">DOCUMENT</td>
121 </tr>
122 </table>
124 <form id="autosub"><input type=submit name=subme /></form>
126 <script type='text/javascript'>
128 $("#fileversion").text($.fn.jquery);
130 // Try an auto-submit, it should only fire once
131 $(function(){
132 var triggered = false;
133 $("#autosub input").trigger("keypress");
134 $("body").on("submit", "#autosub", function( e ){
135 e.preventDefault();
136 e.stopPropagation();
137 if ( triggered ) {
138 alert("autosubmit FAIL");
140 triggered = true;
142 $("#autosub").submit().remove();
145 // Events we want to track in row-order
146 var events = "bind-change live-change onX-change bind-propertychange live-beforeactivate live-focusin bind-focus live-beforedeactivate live-focusout bind-blur live-click live-keydown".split(" "),
147 counter = 0;
148 blinker = function(event){
149 if ( !counter ) {
150 $("#changes tbody td").text("");
152 var $el = event.data,
153 prev = $el.text();
154 prev = prev? prev +" | " : "";
155 return $el
156 .text(prev + ++counter+" " + (this.value.replace(/^on$/,"") || this.id || this.checked || ""))
157 .css("backgroundColor","#0f0")
158 .delay(800)
159 .queue(function(next){
160 $el.css("backgroundColor","#afa");
161 --counter;
162 next();
166 for ( var i=0; i < events.length; i++ ) {
167 var m = events[i].split("-"),
168 api = m[0],
169 type = m[1],
170 $row = $("<tr><th>"+type+" "+api+"</th></tr>");
172 $("#changes thead td").each(function(){
173 var id = "#"+this.id,
174 $cell = $('<td></td>');
175 if ( api == "onX" ) {
176 $(this).find("input, button, select, textarea").each(function(){
177 this["on"+type] = function(e){ e = $.event.fix(e||event); e.data = $cell; blinker.call(this, e); };
179 } else if ( api == "bind" ) {
180 $(this).find("input, button, select, textarea").bind(type, $cell, blinker);
181 } else {
182 $(id+" input,"+id+" button,"+id+" select,"+id+" textarea").live(type, $cell, blinker);
184 $row.append($cell);
186 $("#changes tbody").append($row);
189 // Ensure that cloned elements get the delegated event magic; this is
190 // implementation-specific knowledge but otherwise impossible to test.
191 // The beforeactivate event attaches a direct-bound change event.
192 // (Only care about the live change for this third select element.)
193 var sel1 = $("#select-one select:first-child");
194 if ( typeof(sel1[0].fireEvent) !== "undefined" ) {
195 sel1.trigger( "beforeactivate" ).clone().appendTo("#select-one");
196 //alert($("#select-one select").map(function(){ return this._change_attached || "undef"; }).get().join("|"));
199 jQuery.fn.blink = function(){
200 return this
201 .css("backgroundColor","green")
202 .text( (parseInt(this.text(), 10) || 0) + 1 )
203 .delay(700).queue(function(next){
204 jQuery(this).css("backgroundColor","#afa");
205 next();
209 jQuery.fn.addSubmitTest = function( id, prevent ) {
210 return this.live("submit", function(e){
211 if ( prevent ) {
212 e.preventDefault();
214 jQuery(id).blink();
218 $("#text_submit").addSubmitTest("#textSubmit", true);
219 $("#password_submit").addSubmitTest("#passwordSubmit", true);
220 $("#submit_submit").addSubmitTest("#submitSubmit", true);
221 $("#prog_submit").addSubmitTest("#submitSubmit", true);
222 $(document).bind("submit", function(){
223 jQuery("#boundSubmit").blink();
226 </script>
227 </body>
228 </html>