473,320 Members | 2,145 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How do I call a prototype function?

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.toolbarAction is not a function"
error.

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

-----------------------------------------------------------------------
function txtEditor(textarea) {
var parent = textarea.parentNode;
this.textarea = parent.removeChild(textarea);
this.toolbar = this.createToolbar(textarea.name);

// etc (bouw de editor) ...

this.createPopups();
}

txtEditor.prototype.createPopups = function() {
var image = createNode('div', 'image', 'popup');

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

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

return el;
}

txtEditor.prototype.toolbarAction = function(theAction, text) {
alert(theAction + ' - ' + text);
}
-----------------------------------------------------------------------

Any help would be greatly appreciated!
Dennis

Dec 30 '06 #1
6 2578
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.toolbarAction is not a function"
error.

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

-----------------------------------------------------------------------
function txtEditor(textarea) {
var parent = textarea.parentNode;
this.textarea = parent.removeChild(textarea);
this.toolbar = this.createToolbar(textarea.name);

// etc (bouw de editor) ...

this.createPopups();
}

txtEditor.prototype.createPopups = function() {
var image = createNode('div', 'image', 'popup');

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

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

return el;
}

txtEditor.prototype.toolbarAction = function(theAction, text) {
alert(theAction + ' - ' + text);
}
-----------------------------------------------------------------------

Any help would be greatly appreciated!
Dennis

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA
Dec 31 '06 #2
Thanks, but it doesn't help. I now get a "that is not defined error"
using the code below:

txtEditor.prototype.createPopups = function() {
var that = this;
var image = createNode('div', 'image', 'popup');
s = '<a onclick="that.toolbarAction(\'plain\', \'foobar!\')">x</a>';
image.innerHTML = s;
document.body.appendChild(image);
}

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!

Dec 31 '06 #3
de**************@gmail.com wrote:
Thanks, but it doesn't help. I now get a "that is not defined error"
using the code below:

txtEditor.prototype.createPopups = function() {
var that = this;
var image = createNode('div', 'image', 'popup');
s = '<a onclick="that.toolbarAction(\'plain\', \'foobar!\')">x</a>';
image.innerHTML = s;
document.body.appendChild(image);
}

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.prototype.createPopups = function() {
var image = createNode('div', 'image', 'popup');
image.appendChild(Builder.node("a", {}, "x"));
Event.observe(image.firstChild, "click",
this.toolbarAction.bind(this, "plain", "foobar!"));
document.body.appendChild(image);
};

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
Dec 31 '06 #4
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.toolbarAction(\'plain\', \'foobar!\')">x</a>';
image.innerHTML = s;
document.body.appendChild(image);
</OUT>

var s = document.createElement('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.appendChild(s);
document.body.appendChild(image);

Dec 31 '06 #5
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.
Dec 31 '06 #6
Thanks guys! It now works. In the future, I'll try not to upset people
that much ;-)
DOM rules!!

Dec 31 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Neo | last post by:
Why the following code is compilable? The function abc() doesn't take any arguments, still i can call the function with arbitraty number of arguments. Even compiler doesn't show any warning. What...
7
by: Bonzo | last post by:
>From within a function, I want to pass a/some parameters to another function, AND all arguments, passed into this function. e.g. function firstFunction(){ //this function may have been...
11
by: Felix Kater | last post by:
Hi, I can compile and run this code (see below) which twice calls the function f, first with too less, second with too much arguments. But is it legal and free of memory leaks and other...
16
by: arne | last post by:
Hi all, imagine I call a function, but omit one of the parameters, like: foo.c: void foo( int a, int b ) { /* do something with a and b */ return; }
9
by: CryptiqueGuy | last post by:
Consider the variadic function with the following prototype: int foo(int num,...); Here 'num' specifies the number of arguments, and assume that all the arguments that should be passed to this...
5
by: kris | last post by:
Hi I have written a program which prints the hostid on a linux system. The programm uses gethostid() function call which is defined in the library file unistd.h. But my programm gets compiled...
19
by: Prisoner at War | last post by:
Okay, Folks, I guess my real burning concern all along is a "high-level" one: just how does JavaScript interact with CSS? Right now, my newbie self only knows JavaScript and CSS to *co-...
4
by: Ty | last post by:
Hello all, I am creating a web site with Visual Stuido 2008. I am trying to use a java script file to create a busybox for login from this page http://blogs.crsw.com/mark/articles/642.aspx. I...
6
by: howa | last post by:
Consider example: Animal = function(age) { this.age = age; }; Animal.prototype.sleep = function() { alert("Animal Sleeping..."); };
9
by: Yannick | last post by:
Hi everyone - I am not quite sure to understand what is really going on when a function defined in one translation unit calls a function defined in a different translation unit without knowing...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.