diff options
| author | Richard Worth <rdworth@gmail.com> | 2009-12-31 01:11:23 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2009-12-31 01:11:23 +0000 |
| commit | 5ab4b615a52e1b826d4db37a2174d2abca7056ac (patch) | |
| tree | 2b3d1adff09e3508b576a4f95cfe83fd1673d981 /tests | |
| parent | 2dab6ec236719b6a88be4150ed3bb4db01ecaecf (diff) | |
| download | jquery-ui-5ab4b615a52e1b826d4db37a2174d2abca7056ac.tar.gz jquery-ui-5ab4b615a52e1b826d4db37a2174d2abca7056ac.zip | |
Datepicker: added visual test page for #4071
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/visual/datepicker/datepicker_ticket_4071.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/tests/visual/datepicker/datepicker_ticket_4071.html b/tests/visual/datepicker/datepicker_ticket_4071.html new file mode 100644 index 000000000..ede987bc7 --- /dev/null +++ b/tests/visual/datepicker/datepicker_ticket_4071.html @@ -0,0 +1,95 @@ +<!doctype html> +<html lang="en"> +<head> + <title>Datepicker Visual Test : Datepicker ticket #4071</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css"> + <script type="text/javascript" src="../../../jquery-1.3.2.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.datepicker.js"></script> + <script type="text/javascript"> + +function ValidatorHookupEvent(control, eventType, functionPrefix) { + var ev; + eval("ev = control." + eventType + ";"); + if (typeof(ev) == "function") { + ev = ev.toString(); + ev = ev.substring(ev.indexOf("{") + 1, ev.lastIndexOf("}")); + } + else { + ev = ""; + } + var func; + if (navigator.appName.toLowerCase().indexOf('explorer') > -1) { + func = new Function(functionPrefix + " " + ev); + } + else { + func = new Function("event", functionPrefix + " " + ev); + } + eval("control." + eventType + " = func;"); +} + +function HandleChange(event, boundBy) { + var boundBy = boundBy ? boundBy : '$(control).change(function(event){...})'; + var type = event.type, + srcOrTarget = event.srcElement ? 'srcElement' : 'target', + tagName = event[srcOrTarget].tagName; + alert('[' + boundBy + ']\nevent.type: ' + type + '\nevent.' + srcOrTarget + '.tagName: ' + tagName); +} + + $(function() { + var control = $('#myInput')[0], eventType="onchange"; + + $(control).datepicker(); + $(control).change(HandleChange); + $('#changeButton').click(function() { + $(control).change(); + }); + $('#triggerButton').click(function() { + $(control).trigger('change'); + }); + $('#triggerHandlerButton').click(function() { + $(control).triggerHandler('change'); + }); + $('#fireEventButton').click(function() { + control.fireEvent('onchange'); + }); + if (!control.fireEvent) { $('#fireEventButton').remove(); } + + ValidatorHookupEvent(control, eventType, "HandleChange(event, 'eval(control.onchange = func)')"); + + }); + </script> + <style type="text/css"> + button { display: block; } + </style> +</head> +<body> + +<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4071">#4071 - 'length' is null or not an object</a></h1> + +<h2>Summary</h2> +In Internet Explorer, when a event such as click on one element causes a change event on another element to trigger programmatically, any change event handler that was bound to that second element through onchange gets the click event instead of the change event. + +<h2>Steps to reproduce</h2> +<p> +To demonstrate the issue, do one of the following: +</p> +<ul> + <li>Click the input to open the Datepicker, then select a date</li> + <li>Or press a number in the text field and blur</li> + <li>Or click a button below</li> +</ul> +<p> +Each will trigger change on the text input. The input has a handler bound in three different ways. Notice the difference when pressing a number in the input and bluring versus either selecting a date or pressing one of the first three buttons. In Internet Explorer, when the issue is present, 2 out of the three event objects are of type 'click' instead of 'change' and have the wrong corresponding srcElement/target when the datepicker or one of the first three buttons are clicked. +</p> + +<input type="text" id="myInput" onchange="HandleChange(event, '<input onchange=\'...\' />')" /> +<button id="changeButton">Click to trigger change event via $(control).change();</button> +<button id="triggerButton">Click to trigger change event via $(control).trigger('change');</button> +<button id="triggerHandlerButton">Click to trigger change event via $(control).triggerHandler('change');</button> +<button id="fireEventButton">Click to fire change event via control.fireEvent('onchange');</button> + +</body> +</html> |