Get reference to Ajax Control in button click event

[Frinavale]

I'm in the middle of implementing a custom Ajax enabled Server Control.
At this point I need help finding the answer to an Ajax Framework question...here it goes:

I have a Server Control that extends from a Panel and implements the IScriptControl interface:

Public Class MyCustomControl
    Inherits Panel
    Implements IScriptControl

This Server Control consists of a collection of Labels, Panels, Buttons, Literals, other Ajax Extenders.

One of the buttons is an "ok" button.

In the JavaScript Object that represents the server control client side, I'm adding handlers to the buttons. For example, here I am adding a handler to my "ok" button:

MyNamespace.MyCustomControl.prototype = {
    initialize: function() {
        MyNamespace.MyCustomControl.callBaseMethod(this, 'initialize');      
//Here I initialize a bunch of private Object variables
 
//Now I'm adding a handler for the buttons...here's the one in question:
        $addHandler($get(this.get_OkID()), 'click', this._okClick);
    },
//...............
 

In the _okClick method that handles the "ok" button's click, I need to some how get a reference to the JavaScript Object that the button belongs to... that the button is associated with.

In that method "this" refers to the button element that was clicked, not the JavaScript Object. The button element has no way to refer to the JavaScript Object it is associated with because it's just a regular Dom element.

I tried looking at the event, but it has no way to reference the JavaScript Object that the event originated from/is associated with.

I tried grabbing all of the JavaScript Object instances loaded (using the Sys.Application.getCommponents method) but while looping through these I'm not able to check if the button belongs to them (if there's a way to do this I'm unaware of it).

Does anyone know how to get a reference to the JavaScript Object that the button element is associated with in the method that handles the button click event?

Thanks,

-Frinny

[gits]

try the following closure:

var me = this;
 
$addHandler($get(this.get_OkID()), 'click', function() {
    this._okClick.apply(me, arguments);
});

kind regards

[Frinavale]

This doesn't work.

What's "me"? Did you mean "this"?
What's arguments?
What does the apply() method do? Where did you get this idea from?

[Frinavale]

Ok I solved the problem.

I wish there was better documentation out there on the Ajax Framework...because piecing things together is difficult without a good resource but anyways...

Apparently if you want to reference the JavaScript Object that is associated with the button in the method that handles the button click event you have create a delegate and pass that as the parameter to the $addHandler() method.

Originally I was just passing a reference to the method (not using a delegate) like this:

MyNamespace.MyCustomControl.prototype = {
    initialize: function() {
        MyNamespace.MyCustomControl.callBaseMethod(this, 'initialize');      
//Here I initialize a bunch of private Object variables
 
//Now I'm adding a handler for the buttons...here's the one in question:
        $addHandler($get(this.get_OkID()), 'click', this._okClick);
    },
//...............
 

Once I changed the code to use a delegate instead, "this" in the _onClick method referred to the JavaScript Object instead of the button element:

MyNamespace.MyCustomControl.prototype = {
    initialize: function() {
        MyNamespace.MyCustomControl.callBaseMethod(this, 'initialize');      
//Here I initialize a bunch of private Object variables
 
 
//Creating a delegate for the _okClick method
 
this._okClickDelegate = Function.createDelegate(this, this._okClick);
 
//Now I'm adding a handler for the buttons...here's the one in question:
        $addHandler($get(this.get_OkID()), 'click', this._okClickDelegate);
    },
//...............
 

This gave me the ability to change some properties of the JavaScript Object and call a method on that specific Object.

I was stuck on this problem all afternoon yesterday!

Now I have an even bigger problem: how do I raise an event....but before I ask the question for real I'm going to do some research on the topic and try a few things.

[gits]

aahhrg, my bad ... it should be:

var me = this;
 
$addHandler($get(this.get_OkID()), 'click', function() {
    me._okClick.apply(me, arguments);
});
 

ok ... to explain it a bit :) with

var me = this;

we store the value of the reference to the current context in a new var me. this reference-value is even stored (closed) in the anonymous function that is used as a 'context'-wrapper in your event-adder-function. so later on me refers to the context that we assigned here. since i guess that you are using the this-keyword in the _onClick()-method we now have to pass that context to this call and therefore we might use the apply() method that gets the context passed as the first arg and the second arg is an array of more parameters ... arguments is a JavaScript-keyword for the args of a function and we just pass it from the wrapper to the _onClick() method ... in case you would need it?

kind regards

[gits]

ahh ... your solution does a similar thing ;) ... as you see it looks like the apply wrapped in a function ;) would you mind to test my suggestion to see whether it works? ...

kind regards
gits

[Frinavale]

@gits
'context-wrapper'....this is an Object?
I'm going to look into this.


@gits
When I tried googling the apply() method I came up with thousands of references that didn't pertain to my problem. Is this a native JavaScript method?

@gits
I'm guessing that this is probably done in the Function.createDelegate() method that I used....and that is how JavaScript Object was made available to me in the _onClick method.

[Frinavale]

@gits

I did try your suggestion...well I ended up changing it so that "this" was passed into the apply method.

It didn't work, for some reason the _onClick method was never called when I clicked the button.

I'm assuming this is because you are supplying an inline function (can't think of a better term) to the $addHandler method:

var me = this;
 
$addHandler($get(this.get_OkID()), 'click', function() {
    this._okClick.apply(me, arguments);
});

I tried changing it to :

var me = this;
 
$addHandler($get(this.get_OkID()), 'click', function() {
    return this._okClick.apply(me, arguments);
});

But that didn't work either.....

I'll try again.

[gits]

it is a native JavaScript method ... have a look here ... MDC is a very good reference for all JavaScript related things ...

and 'context'-wrapper was just a descriptive name that i used for the closure-construct in the current case that we had ;)

kind regards
gits

[gits]

yes ... i corrected it in my follow-up post (#5):

var me = this;
 
$addHandler($get(this.get_OkID()), 'click', function() {
    me._okClick.apply(me, arguments);
});

did you try this too? i think it should work?

PS: otherwise i had to rethink my above explainations ;)

[Frinavale]

Ok.........I got it to work sort of.............(I think?)
Just sec let me clean it up and explain what I'm doing.

The problem was that I renamed the button and function when I posted the code, when I tried using your code I forgot to change one of the names and it was not working..

[gits]

and now it is? i mean working? ;)

[Frinavale]

Haha yes you were right, oh mighty king of JavaScript :)

I broke it up a bit so that I could better understand what was going on:

MyCustomNamespace.MyCustomControl.prototype = {
    initialize: function() {
        MyCustomNamespace.MyCustomControl.callBaseMethod(this, 'initialize');
//...........
 
 
//getting a reference to the ok button
        var okButton = $get(this.get_OkID());
//Assigning context to the method that handles the ok button click
        this._okClick.apply(this, arguments);
 
//Adding an event listener to the button click that executes the _okClick method
        $addHandler(okButton, 'click', this._okClick);

Now, what's interesting here is that my _okClick method is executed when the Object is created.

Does the apply() method cause it to be executed?

This is causing a problem because the _okClick method is setting a property in the Object that is used in the method that displays the visual parts of the control (displays the Ok button)....because this property is getting set, the display method is not displaying the control when I call that method (in another button click...)

[gits]

puuuuh ... i thought i couldn't be wrong ... and fortunatly i wasn't *lol*

yes ... apply calls the method with the given context and args ... so you need to use the closure (what you called 'inline'-function) to wrap that. and therefor we need the me-variable since the function has a new context inside ;)

have a look what i found somewhere - this is the code for the createDelegate:

Function.createDelegate = function Function$createDelegate(instance, method) {
    /// <summary locid="M:J#Function.createDelegate" />
    /// <param name="instance" mayBeNull="true"></param>
    /// <param name="method" type="Function"></param>
    /// <returns type="Function"></returns>
    var e = Function._validateParams(arguments, [
    {name: "instance", mayBeNull: true},
    {name: "method", type: Function}
    ]);
    if (e) throw e;
    return function() {
      return method.apply(instance, arguments);
    }
} 

looks like our example ... doesn't it? ;)

[Frinavale]

:) it looks exactly the same.....

In that case, why didn't the inline method work?

Let me try it again..

[gits]

oh ... i thought it did? #10 and #5 should work ...?

[Frinavale]

Ok the following does work.

MyNamespace.MyCustomControl.prototype = {
    initialize: function() {
        MyNamespace.MyCustomControl.callBaseMethod(this, 'initialize');      
//Here I initialize a bunch of private Object variables
 
         var me = this;
         var okButton = $get(this.get_OkID());
 
        $addHandler(okButton, 'click', function() {me._okClick.apply(me, arguments); });
}

[gits]

ahh ... so i was right ;) ... what a strange expierience ... but sometimes i'm right indeed ;) ... so far for my first answers in a .NET forum *lol* ...

kind regards,
gits

[Frinavale]

@gits
That article has to be the most confusing article ever.
If I didn't have the problem that I was having, it would have been pretty hard to determine what the apply method was based on their description:

Allows you to apply a method of another object in the context of a different object (the calling object).

Thank goodness they have a weak example on how to use it....

[gits]

;) that is certainly something that is a matter of taste of the reader ... i have to admit that a lot of the MDC references are short and rely a bit on some more advanced JavaScript knowledge of the reader ... it is not a good point to start learning the language, but it is a good point to look for a reference when you need to have a look at the api-usage or similar things ... ;)

kind regards