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>
>
>
>
>
>
>

Received on Tuesday, 9 January 2007 12:58:06 UTC