9 Jan 14:58
Re: event for attribute change of a <select> (DOMAttrModified?)
From: Master Br <master <at> sitesbr.net>
Subject: Re: event for attribute change of a <select> (DOMAttrModified?)
Newsgroups: gmane.comp.web.dom.general
Date: 2007-01-09 13:58:23 GMT
Subject: Re: event for attribute change of a <select> (DOMAttrModified?)
Newsgroups: gmane.comp.web.dom.general
Date: 2007-01-09 13:58:23 GMT
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:
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>
RSS Feed