gmane.comp.web.dom.general

Fulvio | 8 Jan 19:27

event for attribute change of a <select> (DOMAttrModified?)


Say you have a <select>, that gets disabled and enabled by some event,
i.e. the "disabled" attribute gets set or removed.  Is there any event
that I could trap when the disabled state changes?

The only two I could find are:
- onpropertychange, which is only supported in IE, and only when the
"disabled" attribute gets removed, not when it is set
- DOMAttrModified, which is in the Level 2 DOM spec
(http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent)
but somehow does not work right in Firefox:  I do get a flurry of 15 
events when the page loads, 6 of which seem to be triggered by the
"disabled" attribute for the "scrollbar" of the select, but never when it
actually gets disabled or enabled.

Here is a small sample: (the console.log works if you have Firebug
installed)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>dynamic filters</title>

<script type="text/javascript">
function selectchange(select) {
  var child = document.getElementById(dynfilterhierarchy[1]);
  var foo = child.getAttribute("disabled");
  if (foo) { child.removeAttribute("disabled", 0); }
  else { child.setAttribute("disabled", "true", 0); }
}

function selectpropertychange(e) {

(Continue reading)

headers

João Eiras | 9 Jan 04:09

Re: event for attribute change of a <select> (DOMAttrModified?)


Opera works just fine with that testcase.
Mozilla, for me, on the other hand didn't get anything right.

Fulvio <www-dom <at> svsoliton.net> escreveu:

> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html><head><title>dynamic filters</title>
> <script type="text/javascript">
> function selectchange(select) {
>   var child = document.getElementById(dynfilterhierarchy[1]);
>   var foo = child.getAttribute("disabled");
>   if (foo) { child.removeAttribute("disabled", 0); }
>   else { child.setAttribute("disabled", "true", 0); }
> }
> function selectpropertychange(e) {
> //  console.log("event: %o, target: %s, name: %s, oldvalue: %s,
> newvalue: %s, change: %s, relatednode: %o", e, e.target.id, e.attrName,
> e.prevValue, e.newValue, e.attrChange, e.relatedNode);
>   alert("hello, world!");
> }
> </script>
> </head>
> <body>
> <fieldset>
> <legend>one</legend>
> <select id="dynfilter0" onchange="selectchange(this);">
> <option> </option>
> <option>Books</option>
> <option>Music</option>

(Continue reading)

headers

Boris Zbarsky | 9 Jan 05:00

Re: event for attribute change of a <select> (DOMAttrModified?)

João Eiras wrote:
> Opera works just fine with that testcase.
> Mozilla, for me, on the other hand didn't get anything right.

Disabled form controls in Mozilla call stopPropagation on all events, so the 
listener in question doesn't fire.

You may want to file a bug on this if there isn't one...

-Boris

headers

Master Br | 9 Jan 14:58

Re: event for attribute change of a <select> (DOMAttrModified?)

My comments:
I just think that:
1- The 'console' part should be surrounded by a try-catch with if(console) as it seems 'console' is not present in every browsers.
2- There was no need of the onpropertychange Attr in the second select as the event was added by the script.

One suggestion:
Why not using just dynfilter1 instead of having to build an array to use a longer name dynfilterhierarchy[1] ?
For instance one function you would send the index of the filter id could do this:

function doSomethingWithTheFilters( filter_index){ ....
var the_filter= document.getElementById( 'dinfilter' + filter_index); ....
--------------------------------------------------------------------------------------
I tested the example and it really doesn't work in Firefox.
But I tested it in Opera 8.5 and the example didn't work too. Only in the newest version.

Fulvio escreveu:

Say you have a <select>, that gets disabled and enabled by some event, i.e. the "disabled" attribute gets set or removed. Is there any event that I could trap when the disabled state changes? The only two I could find are: - onpropertychange, which is only supported in IE, and only when the "disabled" attribute gets removed, not when it is set - DOMAttrModified, which is in the Level 2 DOM spec (http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent) but somehow does not work right in Firefox: I do get a flurry of 15 events when the page loads, 6 of which seem to be triggered by the "disabled" attribute for the "scrollbar" of the select, but never when it actually gets disabled or enabled. Here is a small sample: (the console.log works if you have Firebug installed) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>dynamic filters</title> <script type="text/javascript"> function selectchange(select) { var child = document.getElementById(dynfilterhierarchy[1]); var foo = child.getAttribute("disabled"); if (foo) { child.removeAttribute("disabled", 0); } else { child.setAttribute("disabled", "true", 0); } } function selectpropertychange(e) { // console.log("event: %o, target: %s, name: %s, oldvalue: %s, newvalue: %s, change: %s, relatednode: %o", e, e.target.id, e.attrName, e.prevValue, e.newValue, e.attrChange, e.relatedNode); alert("hello, world!"); } </script> </head> <body> <fieldset> <legend>one</legend> <select id="dynfilter0" onchange="selectchange(this);"> <option> </option> <option>Books</option> <option>Music</option> </select> <select id="dynfilter1" onpropertychange="selectpropertychange();"> </select> <select disabled="disabled" id="dynfilter2"> </select> </fieldset> <script type="text/javascript"> var dynfilterhierarchy = new Array("dynfilter0", "dynfilter1", "dynfilter2"); console.log(dynfilterhierarchy[1]); var node = document.getElementById(dynfilterhierarchy[1]); console.log(node); node.addEventListener('DOMAttrModified', selectpropertychange, false); </script> </body></html>