JScript objects, events and "this"

[danny.dion]

Hi ! I have a question about JScript :

I have an object class wich dynamically creates a control in the page.
Then it binds an event to that control, pointing on one of its methods
(the object's). This method, in turn, calls other of its own
methods...

The binding seems ok and the change() method does get called. But I
get an error message (This object does not support this property or
method) when I call other methods on the object.

I think that the implicit "this" object sent to the method does not
point to the right object instance...

Does anyone have a clue on how I might solve this ?

TextField.prototype.generateField = function() {
this.fieldReference = window.document.createElement("input");
this.fieldReference.type = "text";

this.fieldReference.name = this.fieldId;
this.fieldReference.id = this.fieldId;
this.fieldReference.value = this.value;

this.fieldReference.attachEvent("onchange", this.change);

this.fieldWrapperReference.innerHTML = "";
this.fieldWrapperReference.appendChild(this.fieldReference);
}

TextField.prototype.change = function() {
// Fired by the onchange event
this._setStyles();
this._updateChilds();
if (this.onChangeFunction != null) {
this.onChangeFunction();
}
}

 

[Evertjan.]

wrote on 09 jun 2006 in microsoft.public.inetserver.asp.general:

Hi ! I have a question about JScript :
[...]

Though ASP can be written in Jscript, it is and remains serverside.

Your questions are about j(ava)script and the DOM,
so in a clientside browser.

Off-topic on this classic ASP NG.

Try:

microsoft.public.scripting.jscript

or

comp.lang.javascript

 

[Anthony Jones]

Hi ! I have a question about JScript :

I have an object class wich dynamically creates a control in the page.
Then it binds an event to that control, pointing on one of its methods
(the object's). This method, in turn, calls other of its own
methods...

The binding seems ok and the change() method does get called. But I
get an error message (This object does not support this property or
method) when I call other methods on the object.

I think that the implicit "this" object sent to the method does not
point to the right object instance...

Does anyone have a clue on how I might solve this ?

TextField.prototype.generateField = function() {
this.fieldReference = window.document.createElement("input");
this.fieldReference.type = "text";

this.fieldReference.name = this.fieldId;
this.fieldReference.id = this.fieldId;
this.fieldReference.value = this.value;

this.fieldReference.attachEvent("onchange", this.change);

this.fieldWrapperReference.innerHTML = "";
this.fieldWrapperReference.appendChild(this.fieldReference);
}

TextField.prototype.change = function() {
// Fired by the onchange event
this._setStyles();
this._updateChilds();
if (this.onChangeFunction != null) {
this.onChangeFunction();
}
}

TextField.prototype.generateField = function()
{
var sInput
sInput = '<input type="text" ';
sInput += 'id="' + this.fieldId + '" ';
sInput += 'value="' + this.value + '" ';
sInput += 'onchange=TextField.prototype.change.call(this) '
sInput += '/>'

this.fieldWrapperReference.innerHTML = sInput
this.fieldWrapperReference.firstChild.myOwner = this
this.elemId = this.fieldWrapperReference.firstChild.uniqueID // if
fieldId is not unique across document

}
TextField.prototype.getElem = function()
{
return document.getElementById(this.elemId) //OR use fieldId is unique
across document
}
TextField.prototype._setStyles = function(elem)
{
if (!elem) elem = this.getElem()
// your code but instead of this.fieldReference use elem
}

TextField.prototype.change = function()
{
var myOwner = this.myOwner
// Fired by the onchange event
myOwner._setStyles(this);
myOwner._updateChilds(this);
if (myOwner.onChangeFunction) myOwner.onChangeFunction();
}

Fundamentally to create a control like object around DHTML elements you will
need the element to reference the 'owning' Javascript object and the
Javascript object will need to hold a reference to the DHTML element.

This creates a circular reference which, under mozilla, is not a problem
since all objects Javascript and DHTML are handled the same way in a garbage
collecting space. However in IE the DHTML elements are COM objects so
circular references like this will result in memory leak. The solution is
to never hold a reference to a DHTML object in your javascript objects.
Hold a unique ID instead and use geElementById to retrieve the element when
needed.

BTW events created with attachEvents all execute with the this object being
window.

Anthony.