Getting An Object Instance Reference In An Event Handler

Jan 3, 2006

I've been playing around with JS for a while, but I've not ever found fantastic learning resources. I'm comfortable with other programming languages, so I'm very interested in OOP programming for JS, and I've started to use tools like the Prototype library for that purpose.

However, one problem has consistently caused me problems whenever I'm writing a JS Class. How can I get a reference to the specific class instance from inside an event handler that I create with a class method. Let me give an example of what I want to do:

(This code is using the Prototype library...)

myClass = Class.create();
myClass.prototype = {
makeLink: function(obj) {
// Out here, "this" refers to the instance of the myClass Class
obj.innerHTML = ''
obj.onclick = function() {
// In here, "this" refers to the clicked on element.
// How do I get a reference to the instance of myClass in here?
}
}

Here's the best way that I know how to do this right now. It seems to work in Firefox alright, but doesn't seem to work in IE:

myClass = Class.create();
myClass.prototype = {
makeLink: function(obj) {
obj.innerHTML = ''
self = this; // Save a reference to class instance as "self"
obj.onclick = function() {
// Self is evaluated to instance reference at time of assignment to onclick
self.linkClicked();
}

linkClicked: function() {
// Do something useful here
}

}

Is there a more elegant way to do this? I could just create all of my event handlers for objects outside of the class in procedural code where I already have a reference to the class object, but I like to wrap these things up inside the class, because sometimes they get significantly more complicated than this very simple one. Anybody have any solutions? This has to be a common design pattern...

View 8 Replies


ADVERTISEMENT

Event Reference In Handler Functions

Feb 23, 2007

As far as readability and consistency, which is better in your opinion (or if functional difference, that I didn't account for,)

Event.observe($('txtName'), 'keypress', handleKeyPress);
Choose one:
A.
Code:
function handleKeyPress(event) {
alert(event.keyCode);
}
B.
Code:
function handleKeyPress(evt) {
evt = evt || window.event;
alert(evt.keyCode);
}
C.
Code:
function handleKeyPress(evt) {
evt = evt ? evt : window.event;
alert(evt.keyCode);
}

View 2 Replies View Related

Reference To The Object An Event Was Attached To?

May 30, 2006

If I have several links with onClick events pointing to the same function, how can I get a reference back to the link that was clicked? I'd like to change the link text after the onClick fires so the user knows something is happening, without having to create and assign id's to every link.

View 5 Replies View Related

Dynamically Name An Instance Of An Object

Dec 17, 2005

I'm trying to use a variable that is passed into a function to to dynamically name an instance of an Object(). I've created a Timer() Object that seems to work just fine... the problem is I can't figure out how to pass in an instance name into setTimer() to create a new instance of Timer() object?? My ultimate goal is to have multiple instances of the Timer() Object running at once. While the code below works it only allows me to create 1 instance of the Timer() Object with the name of tmp. Code:

View 8 Replies View Related

How Do I Access The Object Instance From Within Class

Apr 22, 2007

I have a javascript object which dynamically generates a table adding, deleting and moving rows as the user clicks on buttons or links. Problem is when I generate a table row and add the javascript method call to my class, I have to put the object instance name variable of the class in order for it to be called from the onclick=function(). This is seriously limiting, but I'm stuck for a way round it. Heres a edited of the code so you get the idea....

Instantiating the object :-

var dtl = new DynamicTableList("table1", $
{myObject.allFieldsAsJavaScriptArray}, true, true, true);


My javascript class DynamicTableList, note the dtl javascript object
instance variable being referred to in the addRow function. How can I
avoid this???

function DynamicTableList(thisObjName, tableName, options, showDelete,
showUp, showDown)
{
this.processRow = function(r, row, up, down)
{
...
};

this.processRows = function()
{
...
};

this.getVisibility = function(visible)
{
...
};

this.delRow = function(button)
{
...
};

this.addRow = function(selection)
{
...

if (showDelete)
{
var cell2 = document.createElement('TD');
var inp2 = document.createElement('IMG');
/
************************************************** ***********************************************/
inp2.onclick=function(){dtl.delRow(this);} // Have to specify
dtc!!!!!!!!
/
************************************************** ***********************************************/
inp2.title='Delete'
inp2.alt='Delete'
inp2.src='images/delete.gif'
cell2.appendChild(inp2);
row.appendChild(cell2);
}

...

tbody.appendChild(row);

this.processRows();
};

this.moveRow = function(node, vector)
{
};
}

Obviously the code dtl.delRow(this); is being dynamically generated, but how do I replace the dtl instance name with something that'll work whatever the user of this class calls the instance of it!

View 2 Replies View Related

New Instance Of Object Throwing Error 'undefined'

Jun 8, 2011

I have made/modifying a script that I can create AJAX objects on the fly. It is working fine in Chrome, FF, Opera, Safari but not IE -.- IE = nightmare

[Code]...

View 1 Replies View Related

Passing Reference To Object To Another Object?

Jun 21, 2010

I know just enough javascript to be dangerous, I created a 5 star rater for pages, which is set up something like this:

Code:
var starRater=function(id){
// get latest rating info from server, write into "id" div, etc
}
//later in code...
var rating=new starRater("rating");

Over the course of development I added a comment section, page visit count and so forth, and ended up with redundant code and a lot of calls to the server. I thought instead I would make one initial call and then initialize the elements with the information returned.

To be able to call the initialize function on these elements, I need some reference to them. I could call them directly, as in the example above I could call rating.init(), but I'd have to know what variable name was given to it. Instead I was thinking I'd pass some sort of reference to the object, but that doesn't seem to be working.

[Code]...

In the code above I get undefined for raterElem.testVar. Obviously I'm missing something. What am I doing wrong?

View 8 Replies View Related

Reference An Object's Method From Within An Object?

Aug 12, 2009

I have a Class name Merkzettel.

[Code]...

and addClickEvent sets the onclick attribute of above mentioned DIV. and in addClickEvent I am explicitely mentioning the name of class object. This means every time I create a Variable with another name I have to Change this function also.

View 3 Replies View Related

Passing Object By Reference?

Jan 3, 2011

My question is commented in the script:

function Love(){
var req = {
ring : 'gold',

[Code]...

console.log(details.ring); // why does this return gold and not silver if req is passed by reference and we already changed its value above and so it's pointing to the same memory position?

View 11 Replies View Related

Dynamic Object Reference

Jan 28, 2008

This works in firefox:

document.eval(formname).elements.length

it does not work in any other browser

I call the same elements tag in lots of places, I'd have to wrap a large chunk of code in eval to make it work in other browsers. Is there any other way to call a dynamic object name?

View 2 Replies View Related

How To Call The First Reference Object

Jul 11, 2011

$(function(){
$('.table_pay').dblclick(function(){
if($('div', this).is('.value')){

[code]...

What to do on the 13th line that the reference object which is on the 2nd line (the class named"table_pay") will be its reference call..

View 5 Replies View Related

Sub-object Callback Handler Changes 'this'?

Oct 3, 2010

I have simplified the problem - see image.[URL]I instantiate object obj1 which inturn instantiates subObj1. subObj1 is a slave to obj1. obj1 registers a handler function called method1 with subObj1 so that subObj1 can tell obj1 when it has finished.For example: call subObj1.subMethod2() to get the sub object to do something.subObj1 calls subMethod1 when its finished with its task, which inturn causes method1 to be called.

If I call method1 directly from obj1 'this' refers to obj1.However when method1 gets called by the subObj1 through the event handler mechanism,I find that 'this' has been changed to refer to subObj1.This is a problem as now method1 has lost all connection with its object obj1.If I define method1 within the 'Class1' function, I can get it to work if I use the 'var me = this;' trick, but if you have lots of methods within Class1() with further nesting this can get a bit hard to read.So, can someone tell me how to deal with 'this' changing. I.e. I want 'this' to refer to obj1 within method1.

<html>
<body>
<script type="text/javascript">

[code]....

On another note, there seems to many ways of defining methods (e.g using 'prototype' etc etc) and I gettting sick and tierd of a 'trial and error' approach to get things working. Can anyone recomend a good resourse that sets out the best way to design with javascript so I dont keep running into these issues.

View 5 Replies View Related

Getting A Document Object From A Form Reference?

Feb 22, 2006

Is it possible to get a reference to a form's document object exclusively from a reference to the same form? I mean, for example, if I have:

var f1 = document.forms["form1"];
var f2 = parent.document.forms["form2"];
var f3 = top.document.forms["form3"];

Is it possible to get the document object of each form only from these vars? Is there something like, i.e., a "form.document" property?

View 3 Replies View Related

Inner Object Parent Variable Reference

Sep 11, 2007

I have an error when I try to make:

CustomObj =
{
is_all : Compatible(),

Types :
{
PASS : CustomObj.as_all ? "ok" : "onok",
...
...
...
but in an object literal notation I cannot use a parent object
variable? or

can I do to create a global variable inside my parent class
(CustomObj) and

than to use in my children objects like Types?

View 1 Replies View Related

Date Object - Value Assignment Not Reference ?

Feb 7, 2011

The goal is for selectedDay to be assigned the value of the system variable Mainpackage.subclass0.subclass1.firstDay and then incremented by two days. Mainpackage.subclass0.subclass1.firstDay needs to be unchanged.

Important system variable in red. To be 'manipulated and used' variable in green. Even with an intermediary, third, dummy variable it doesn't work:

Console log is:

It doesn't work in my webapp : All variables change at the same time.

View 4 Replies View Related

Reference A Form Object With Variable?

Nov 30, 2010

I am fairly new to JavaScript, have been using VBscript before and JavaScript comes off a bit illogic...

Anyways, here's what I am trying to do:

function TestFileType(formname) {
fileName=document.[formname].img1.value;

apparently I can't reference a form object like this. What is the correct way of going about it?

View 2 Replies View Related

Converting String To DOM Object Reference?

Dec 5, 2010

I have searched the web and this forum for the answer to this but am unable to find a reasonable choice. So, this is the problem I am facing.

Code:
var str = "document.frames[0].document.frames[0]";
var str 1 = "document.frames[6]";
//Loop Starts
{
var obj1 = str + str1;

[Code]...

I know the easiest way to do this is to use eval() and it most definitely does work. The problem is that I have to use eval() inside a loop to check whether the reference is null and from what I hear, that is one of the most inefficient ways to code. I have searched for alternatives like using, var myFunc = new Function(string) and then calling myFunc(). But this does not work in my case. I cannot find any other alternative in this case. I guess one can say eval() is the only choice here but I am not too sure.

View 10 Replies View Related

Passing Object Reference As A Parameter?

Apr 1, 2010

I have a function that changes the innerHTML of a DIV element. I want to pass to that function as a parameter a reference to the DIV to be changed. In the example below it works the first time (executed with the body onLoad event). As the subsequent function declaraton is rewritten by the function itself, it can no longer reference the targeted DIV. I tried to pass a string teference and use eval(), but this time it fails the third time it is executed.

Code:
<html>
<head>
<title>Passing Parameters to a Function (with object prameter)</title>
<script type="text/javascript">

[Code].....

View 6 Replies View Related

JQuery :: Reference Current Object In Onclick

Jan 8, 2011

For a site, I am making a listing object. What it does, is it fetches rows of data from a serve using JSON. The object has a method called loadlist.to print out the data it now does something like this:

str="";
$.each(jsondata,function(){
str+="<tr>";

[code]....

View 1 Replies View Related

JQuery :: Using Var Passed To Function To Reference An Object?

Mar 27, 2010

I have just started using the data functions in jQuery for keeping track of a few items on the client. The user can click on links, which call a function that updates the display and stored data value.I am storing data as a set of columns, named c1, c2, c3 etc.

I update the relevant column like this
function UpdateCol(column)
{

[code]....

View 1 Replies View Related

Store An Object Reference Inside A Variable?

Mar 9, 2011

How do I store an object reference inside a variable when I want the object reference to to reference the first "ul" html element nested inside the current object (as referenced by this keyword)?

var slideList = ???

I am trying to create a sliding menu.

View 5 Replies View Related

Simple Reference Of Object Inside Iframe?

Apr 15, 2010

I simply need to reference an object inside an iframe:

I need it to work on all browsers as I understand this is difficult for this type of command.

Why does the below code not work in ANY browser let alone all of them.

I have tested in IE8 and FF3 (not IE7).

file1.html
---------
<iframe name="iframe1" id="iframe1" src="file2.html"></iframe>
<script>
parent.iframe1.form1.obj1.disabled=false;

[Code].....

View 10 Replies View Related

One Event Handler Provoking Another

Jul 23, 2005

I'm seeing surprising behavior, consistent across Opera, Firefox, and IE.
An event handler is changing the value of an element, and there is apparently
no Change event being generated for the element. A simple illustration is,
make an INPUT element with an onchange; type in a new value, the Change
event handler is called. But make a button whose Click handler changes the
value, and the Change handler does not get called.

It appears that events are not generated while an event handler is running.
Can this be true?

View 3 Replies View Related

Event Handler For Enter Key

Aug 11, 2005

How can I interrupt the enter key so it won't trigger unwanted events on my
web page? I have tried this:

var defaultEventHandler = obj.getEvent("onkeydown");

var myEventHandler = function(event){
if(event.keyCode==13){
alert(obj.getProperty("selection/index"));
}
else{
defaultEventHandler.call(this, event);
}
}
obj.setEvent("onkeydown", myEventHandler);

But it won't even enter the function.

View 3 Replies View Related

Event Handler Won't Work ?

Apr 5, 2011

I got following document:

When you click the main button, will one of the six images get a background image, and you can then press the image with the background image, and get your "reflextime".

But it won't work. When I press the image, were the new background image has shown, you can click on it and get your time - why?'

View 8 Replies View Related

Add A New Function To An Event Handler

Jan 12, 2006

I try to add a function to be triggered also within an event (which already has a function). I coded it, unfortunatelly one line of the code should be different for IE and Moz. I try to find a common way without using a browser detector... Any ideea? The red line works for Mozilla, the blue one for IE:

function addFunc(){
var e = document.getElementsByTagName('*');
for(var i=0;i<e.length;i++){
if(e[i].getAttribute('onclick')||e[i].getAttribute('onclick')!=null){// Moz || IE
//var f = new Function(e[i].getAttribute('onclick'));
var f = e[i].getAttribute('onclick');
e[i].onclick=function(){f();otherFunction()}
}}} Code:

View 6 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved