PDA

View Full Version : Events: change and click


jbraband
20 Feb 2007, 3:01 PM
I have a seemingly simple issue, but can make heads or tales of it.

i have a bunch of form elements within the tab of a BasicDialog element. Think of the dialog element as a form and when closing the box (via provided button), i want to prompt the user to save their changes; but only if they have indeed made changes.

So I am keeping an _isSaved variable (a dirty flag) with applicable mutators and accessors and assigned a function to the 'change' event of the form elements that set the _isSaved variable to false.

The issue I'm running into is when I click on an input box, change the text, and then click the button...without first removing focus from the input box. The 'click' event of the button fires before the 'change' event of the input box. in fact, the 'change' event never fires until i change focus.

is there another approach/event that I can use besides 'change'?

also, can someone describe the differences between on and mon (event listeners vs. managed listeners)?

here is a sample page that demonstrates the above senario (of course, change the pathing to yui-ext, yui, etc...)



<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="../Resources/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../Resources/yui-ext/yui-ext-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/examples.css" />
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/tree.css" />
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/yui-ext.css" />

</head>
<body>
<div id="Dialog">
<div class="ydlg-hd">Test Box</div>
<div class="ydlg-tab" title="Test Tab">
<div class="inner-tab">
<input type="text" id="InputBox" value="Default Value" />
</div>
</div>
</div>

<script language="javascript" type="text/javascript">
var d = new YAHOO.ext.BasicDialog("Dialog", { modal:true,
autoTabs:true,
width:200,
height:200,
shadow:true,
proxyDrag: false,
draggable: false,
resizable: false,
closable: false});
d.addButton('Test Button', function () { alert('Button Click'); } );
d.show();

var input = getEl('InputBox');
input.on('change', function () { alert('Input Changed'); });
</script>
</body>
</html>
brian.moeskau
20 Feb 2007, 3:11 PM
Have you tried 'blur' instead?

EDIT: Sorry, that was a bit premature. Obviously blur won't tell you if the field has changed. I looked back at some code I have that does this and I'm also using 'change'.
jbraband
20 Feb 2007, 3:17 PM
i just tested by adding



input.on('blur', function () { alert('Input Blurred'); });


to the example above, and it is true that the blur fires before the click. however, i'd have to write my own mechanism for testing if the content has changed.
jbraband
20 Feb 2007, 3:20 PM
I suppose I could attach to keypress. that seems to lead to questions of performance though.

I wonder how a select element reacts...I assume the 'change' happens at the same time and there isnt a keypress for a select element to my knowledge.

back to the lab!
jbraband
20 Feb 2007, 3:23 PM
select boxes perform as i need them to. they fire the 'change' event as soon as you click on an option.

updated example:



<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="../Resources/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../Resources/yui-ext/yui-ext-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/examples.css" />
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/tree.css" />
<link rel="stylesheet" type="text/css" href="../Resources/yui-ext/resources/css/yui-ext.css" />

</head>
<body>
<div id="Dialog">
<div class="ydlg-hd">Test Box</div>
<div class="ydlg-tab" title="Test Tab">
<div class="inner-tab">
<input type="text" id="InputBox" value="Default Value" />




<select id="SelectBox">
<option id="1">1</option>
<option id="2">2</option>
</select>
</div>
</div>
</div>

<script language="javascript" type="text/javascript">
var d = new YAHOO.ext.BasicDialog("Dialog", { modal:true,
autoTabs:true,
width:200,
height:200,
shadow:true,
proxyDrag: false,
draggable: false,
resizable: false,
closable: false});
d.addButton('Test Button', function () { alert('Button Click'); } );
d.show();

var input = getEl('InputBox');
input.on('change', function () { alert('Input Changed'); });
input.on('blur', function () { alert('Input Blurred'); });

var select = getEl('SelectBox');
select.on('change', function () { alert('Select Changed'); });
select.on('blur', function () { alert('Select Blurred'); });
</script>
</body>
</html>
brian.moeskau
20 Feb 2007, 3:23 PM
I was going to suggest 'keyup' but 'keypress' might work too. If you need to check the value, keyup will probably work better as I believe keypress will fire before the value actually changes.

I don't know how it would work for selects and other elements than can be used mouse-only -- you may have to check for click or keyup on those -- not sure if there's a good generic solution.
brian.moeskau
20 Feb 2007, 3:26 PM
Does the select change event fire as soon as you press the up/down keys on it? If not, you might have the same issue if you keyboard select an item in the dropdown then directly click your button.
jbraband
20 Feb 2007, 4:39 PM
it does fire 'change' when using up/down arrows on the keyboard.

unfortunately, that doesnt help me with the input elements. anyone have experience with firing a more timely 'change' event based on keypress/keyup?

bmoeskau, thanks for your attention!