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 6 2601
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
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! 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 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);
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.
Thanks guys! It now works. In the future, I'll try not to upset people
that much ;-)
DOM rules!! This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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 the standard says?
----- file1.c ------
extern unsigned abc();
int main()
{
unsigned *chip_offset;
abc(&chip_offset, 10);
|
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 passed, 0, 1, or n arguments...
...
//call another function...
var someCalculatedValue = 'someValue';
|
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 problems? Of course,
I presume that inside f I don't access i in case it was called via g.
int f(int i){ /* ... */ return 0; }
|
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;
}
|
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 function are of type int.
(My question has nothing to do with the definition of the function
foo, so don't bother about it.)
If I call the function as:
foo(2,3,4,5,6,7,8);/*More arguments than expected*/
| |
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 without any
warnings even if I didnot include any of the header files.
can I know how does this happen i.e how does the compiler identifies
this function gethostid.
Is there any default path from where the compiler picks up the
definition from.
|
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-
exist*...but I'm beginning to get the sense that they actually
interact -- or, perhaps more precisely, JavaScript acts upon CSS...but
how, exactly??
|
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 am using a master page senerio.
The erro I'm getting is
'busyBox' is not a member of 'ASP.login2_aspx'
|
by: howa |
last post by:
Consider example:
Animal = function(age) {
this.age = age;
};
Animal.prototype.sleep = function() {
alert("Animal Sleeping...");
};
|
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 its prototype. Let's say for
instance :
foo.c
#include <stdio.h>
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |