r3568 committed - Datepicker: added visual test page for #4071
Revision: 3568
Author: rdworth
Date: Wed Dec 30 17:11:23 2009
Log: Datepicker: added visual test page for #4071
http://code.google.com/p/jquery-ui/source/detail?r=3568
Added:
/trunk/tests/visual/datepicker/datepicker_ticket_4071.html
=======================================
--- /dev/null
+++ /trunk/tests/visual/datepicker/datepicker_ticket_4071.html Wed Dec 30
17:11:23 2009
@@ -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>
+
+To demonstrate the issue, do one of the following:
+
+<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>
+
+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.
+
+
+<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>
--