How do I call a prototype function?

[dennis.sprengers]

I am writing my own WYSIWYG editor. For inserting URL's, images, etc. I
am not using html popups, but invisible DIV's of which I set the
visibility to "visible" whenever I need them.

Below are some parts of my code. It shows you the main function
txtEditor, which creates an object instance. On creation, I load
createPopups, which eventually has to write all "popups" to the
document body.

The situation is this: when I let the "image" popup DIV appear, and
click on the link, I get a "this.toolbarAc tion is not a function"
error.

So my question is: how should I then invoke toolbarAction from within
the popup DIV?

-----------------------------------------------------------------------
function txtEditor(texta rea) {
var parent = textarea.parent Node;
this.textarea = parent.removeCh ild(textarea);
this.toolbar = this.createTool bar(textarea.na me);

// etc (bouw de editor) ...

this.createPopu ps();
}

txtEditor.proto type.createPopu ps = function() {
var image = createNode('div ', 'image', 'popup');

/*************** *** THIS LINE GENERATES AN ERROR *************** ***/
s = '<a onclick="this.t oolbarAction(\' plain\', \'foobar!\')">x </a>';
image.innerHTML = s;
document.body.a ppendChild(imag e);
}

function createNode(type , name, style) {
var el = document.create Element(type);
el.id = name;
el.className = style;

return el;
}

txtEditor.proto type.toolbarAct ion = function(theAct ion, text) {
alert(theAction + ' - ' + text);
}
-----------------------------------------------------------------------

Any help would be greatly appreciated!
Dennis

[pcx99]

Javascript has a lot of problems tacking "this", it gets lost very
easilly. For that reason most oop javascript uses var that=this; and
then use "that" in place of "this" in assignments. "that" ensures that
even if "this" changes (which is is prone to do) you can still work with
the object you started with. Give that a try and see if it clears up
your problem.

Best of luck and happy new year!
de************* *@gmail.com wrote:

I am writing my own WYSIWYG editor. For inserting URL's, images, etc. I
am not using html popups, but invisible DIV's of which I set the
visibility to "visible" whenever I need them.

Below are some parts of my code. It shows you the main function
txtEditor, which creates an object instance. On creation, I load
createPopups, which eventually has to write all "popups" to the
document body.

The situation is this: when I let the "image" popup DIV appear, and
click on the link, I get a "this.toolbarAc tion is not a function"
error.

So my question is: how should I then invoke toolbarAction from within
the popup DIV?

-----------------------------------------------------------------------
function txtEditor(texta rea) {
var parent = textarea.parent Node;
this.textarea = parent.removeCh ild(textarea);
this.toolbar = this.createTool bar(textarea.na me);

// etc (bouw de editor) ...

this.createPopu ps();
}

txtEditor.proto type.createPopu ps = function() {
var image = createNode('div ', 'image', 'popup');

/*************** *** THIS LINE GENERATES AN ERROR *************** ***/
s = '<a onclick="this.t oolbarAction(\' plain\', \'foobar!\')">x </a>';
image.innerHTML = s;
document.body.a ppendChild(imag e);
}

function createNode(type , name, style) {
var el = document.create Element(type);
el.id = name;
el.className = style;

return el;
}

txtEditor.proto type.toolbarAct ion = function(theAct ion, text) {
alert(theAction + ' - ' + text);
}
-----------------------------------------------------------------------

Any help would be greatly appreciated!
Dennis

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA

[dennis.sprengers]

Thanks, but it doesn't help. I now get a "that is not defined error"
using the code below:

txtEditor.proto type.createPopu ps = function() {
var that = this;
var image = createNode('div ', 'image', 'popup');
s = '<a onclick="that.t oolbarAction(\' plain\', \'foobar!\')">x </a>';
image.innerHTML = s;
document.body.a ppendChild(imag e);
}

Any other ideas? For a usefull discussion, I've but the code of my
editor online @ http://www.danandan.luna.nl/got/txteditor/example.htm.
Feel free to use it in your own application, but please help me out
here :(

Happy newyear!

[Chad Burggraf]

de************* *@gmail.com wrote:

Thanks, but it doesn't help. I now get a "that is not defined error"
using the code below:

txtEditor.proto type.createPopu ps = function() {
var that = this;
var image = createNode('div ', 'image', 'popup');
s = '<a onclick="that.t oolbarAction(\' plain\', \'foobar!\')">x </a>';
image.innerHTML = s;
document.body.a ppendChild(imag e);
}

Any other ideas? For a usefull discussion, I've but the code of my
editor online @ http://www.danandan.luna.nl/got/txteditor/example.htm.
Feel free to use it in your own application, but please help me out
here :(

Happy newyear!

Your problem is not that the function is defined as part of the
txtEditor object. Rather, it is that the scope of your link's click
event doesn't have a reference to "that" or "this".

Try using the DOM to create the link node and then attaching an event to
it instead. Using the Prototype and Scriptaculous libraries
(http://script.aculo.us) for example:

txtEditor.proto type.createPopu ps = function() {
var image = createNode('div ', 'image', 'popup');
image.appendChi ld(Builder.node ("a", {}, "x"));
Event.observe(i mage.firstChild , "click",
this.toolbarAct ion.bind(this, "plain", "foobar!")) ;
document.body.a ppendChild(imag e);
};

You can use traditional DOM methods as well, or other utility libraries
that provide similar functionality. For scoping issues such as this it
is best to either roll your own closure function (in this case the
"bind" function from Prototype) or use one provided by a library.

Cheers!
Chad

[VK]

de************* *@gmail.com wrote:

Any other ideas? For a usefull discussion, I've but the code of my
editor online @ http://www.danandan.luna.nl/got/txteditor/example.htm.
Feel free to use it in your own application, but please help me out
here :(

Within the intrinsic event handler [this] points to the DOM element
that received the event (A in your case). Respectively this DOM element
has no idea about the JavaScript object instance that created it -
unless you take care of it by yourself.

I did not respond because I do not agree with your approach: this a la
scripta - yek - culous way of mishmash tag and handler in one string
and then dump it into innerHTML makes me all upset. So instead of
criticizing I let other people to answer to your direct question. At
the same time if I decided to answer I couldn't stop from criticizing
:-)
<OUT>
/*************** *** THIS LINE GENERATES AN ERROR *************** ***/
s = '<a onclick="this.t oolbarAction(\' plain\', \'foobar!\')">x </a>';
image.innerHTML = s;
document.body.a ppendChild(imag e);
</OUT>

var s = document.create Element('a');
s.href = '#';
s.$ = this; // keeping a reference to the current instance
s.onclick = new Function('this. $.toolbarAction ("plain", "foobar!");
return false;');
s.innerHTML = 'x';
image.appendChi ld(s);
document.body.a ppendChild(imag e);

[Richard Cornford]

pcx99 wrote:

Javascript has a lot of problems tacking "this", it gets
lost very easilly.

That is absolutely false. Programmers familiar with the way - this -
references work in some class-based languages may have problems
understanding how it works in javascript (that the - this - value is
assigned at the point of executing a function and depends always and
only on how the function is called) but the language provides a complete
specification of how the - this - value is assigned and no
implementations are known that do not conform 100% with that
specification.

The - this - value can always be predicated with absolute certainty
whenever it is known how the function is called (as is almost always the
case in javascript code) and how browsers call the functions that they
call can be observed is sufficient detail to allow the - this - value to
be predicted in those circumstances (such as the observation that
browsers call the intrinsic event handling functions on DOM Elements as
methods of those elements and so the - this - value within those
handlers will refer to the Element on which the handler is called).

For that reason most oop javascript uses var that=this; and
then use "that" in place of "this" in assignments.

<snip>

Referring to an object instance through the scope chain of a function
object is only going to be successful if a function object is created
with the object instance referred to by an object on its scope chain.
The OP is building the function body as a string and leaving it to the
browser to build the corresponding function object outside of the scope
of the execution context in which the string is being assembled.

If you had created a well-formed Usenet post instead of top-posting you
may have observed that important detail, and so seen that your
suggestion was either inappropriate or inadequate.

Richard.

[dennis.sprengers]

Thanks guys! It now works. In the future, I'll try not to upset people
that much ;-)
DOM rules!!