extend/sub-class HTMLSelectElement

[Bill M.]

Hello,

I would like to extend or sub-class the base HTMLSelectEleme nt and add some
custom properties and methods. So far this works to create a new select
element.

var new_select= new Selector('new_s elect');

Selector = function(id) {
var container = document.getEle mentById(id);
selector = document.create Element("select ");
container.appen dChild(selector );
selector.id = id;
selector.name = id;
return selector;
}

but the prototype mentods are not showing up ...

Selector.protot ype.setOptions = function(option list) {
...
}

.... so this doesn't work: new_select.setO ptions(optionli st);

what would be the proper way do to this? Do I need to sub-class from a DOM
object that exposes a constructor to create elements (e.g.
Selector.protot ype = some_constructo r)?

Thanks,

Bill

[Bill M.]

Re: extend/sub-class HTMLSelectEleme nt

Well, I found a couple of different possibilities:

1. create the method explicitly

Selector = function(id) {
var container = document.getEle mentById(id);
selector = document.create Element("select ");
container.appen dChild(selector );
selector.id = id;
selector.name = id;
selector.setOpt ions = new Function({ ... code here ...});
return selector;
}

Which is ok, but I would rather define the function outside of the
contructor.

2. extend ALL HTMLSelectEleme nts in the document

HTMLSelectEleme nt.prototype.se tOptions = function(option list) {
... code here ...
}

Which is kind of cool but I'm not sure I want ALL select elements to be
bloated down by the protype methods.

Any other ideas?

Thansk

[Bill M.]

Re: extend/sub-class HTMLSelectEleme nt

> 1. create the method explicitly[color=blue]
>
> Selector = function(id) {
> var container = document.getEle mentById(id);
> selector = document.create Element("select ");
> container.appen dChild(selector );
> selector.id = id;
> selector.name = id;
> selector.setOpt ions = new Function({ ... code here ...});
> return selector;
> }[/color]
[color=blue]
>
> 2. extend ALL HTMLSelectEleme nts in the document
>
> HTMLSelectEleme nt.prototype.se tOptions = function(option list) {
> ... code here ...
> }[/color]

In method #1 I simplified ..

selector.setOpt ions = new Function({ ... code here ...});

to the more managable ...

selector.setOpt ions = setOptions;

and defined setOptions elsewhere, however this doesn't work and I'm stumped
as to why. Method #2 doesn't work either, even though I can see the function
in my DOM Inspector.

My quest for the truth continues.

[Lasse Reichstein Nielsen]

Re: extend/sub-class HTMLSelectEleme nt

"Bill M." <wpmccormick@ho tmail.com> writes:
[color=blue]
> I would like to extend or sub-class the base HTMLSelectEleme nt[/color]

Elements cannot be sub-classed, only classes can. Javascript doesn't
have classes.
[color=blue]
> and add some custom properties and methods.[/color]

So what you want is to add some properties to all select elements?
[color=blue]
> So far this works to create a new select element.[/color]
[color=blue]
> var new_select= new Selector('new_s elect');
>
> Selector = function(id) {[/color]

Always prefix your variables with "var". There is no good reason
for not doing it, and it avoids surprices in some cases.
[color=blue]
> var container = document.getEle mentById(id);
> selector = document.create Element("select ");[/color]

"var selector"! I assume it is meant to be a local variable.
[color=blue]
> container.appen dChild(selector );
> selector.id = id;[/color]

You give the selector the same id as the container. Id's must be unique
in the document, so this is wrong!
[color=blue]
> selector.name = id;
> return selector;
> }[/color]
[color=blue]
> but the prototype mentods are not showing up ...
>
> Selector.protot ype.setOptions = function(option list) {
> ...
> }[/color]

This shows up on the new object that is created by new Selector('..') .
However, this new object is not the object you return. Instead you return
a newly created select element that has nothing to do with the constructor.
[color=blue]
> what would be the proper way do to this?[/color]

If you could find the constructor for HTMLSelectEleme nt, you could add
it there. However, there is no such publically available constructor.

As your later messages sugges, the solution is to add the property
directly to each select element.
[color=blue]
> Do I need to sub-class from a DOM object that exposes a constructor
> to create elements (e.g. Selector.protot ype = some_constructo r)?[/color]

Que? You lost me there :)

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Thomas 'PointedEars' Lahn]

Re: extend/sub-class HTMLSelectEleme nt

Lasse Reichstein Nielsen wrote:
[color=blue]
> "Bill M." <wpmccormick@ho tmail.com> writes:[color=green]
>> what would be the proper way do to this?[/color]
>
> If you could find the constructor for HTMLSelectEleme nt, you could add
> it there. However, there is no such publically available constructor.[/color]

There is no need to find the constructor function, at least not in Mozilla/5.0:

HTMLSelectEleme nt.prototype.fo o = 42;
HTMLSelectEleme nt.prototype.ba r = function() { alert(this.foo) ; };
var oSelect = document.create Element("select ");
oSelect.bar(); // 42


PointedEars

[Bill M.]

Re: extend/sub-class HTMLSelectEleme nt

> There is no need to find the constructor function, at least not in
Mozilla/5.0:[color=blue]
>
> HTMLSelectEleme nt.prototype.fo o = 42;
> HTMLSelectEleme nt.prototype.ba r = function() { alert(this.foo) ; };
> var oSelect = document.create Element("select ");
> oSelect.bar(); // 42[/color]

Yea, I tried that and it didn't seem to work. Maybe I mucjed something up.
My DOM Inspector showed that add-on properties and functions where there,
but I wasn't able to work with them.

I found another way to do what I wanted anyway:

Foo = funtion(prop) {
foo = document.create Element("select ");
foo.property = prop;
foo.fun = fun;
return foo;
}

function fun (param){
....
}

var bar = new Foo('frog');

bar.fun('egg');

This has the advantage of not havin to have all <select> 's inherit uneeded
props and methods.

Cheers,

Bill