I need to access event context AND object context in event handler

Question

I've this piece of code:

function ActivityDialog(_divId, _title) {

    function addButton() {
      var buttonElement = document.createElement('input');
      buttonElement.setAttribute('type','button');
      buttonElement.setAttribute('class','button');
      buttonElement.setAttribute('id','updateButton-' + id););
      buttonElement.onclick = this.updateAction;
    };

    function updateAction() {
      var buttonId = this.id; // correct: this is the Button
      this.sendUpdateRequest(stringUrl); // not defined: Need to reference the current ActivityDialog!!!    
    };

    function sendUpdateRequest(url) {
      // something...
    };

}

As you can see the problem is when I call function sendUpdateRequest; how can I, at the same time, retrieve button infos and call a function?

addyosmani.com/resources/essentialjsdesignpatterns/book/… I hope this paper will help — Manuel Leduc
– Manuel Leduc, Commented Dec 22, 2011 at 15:39
@TomalakGeret'kal he's having a scoping issue where he's trying to reference the event context with this (Button) and the Object context (ActivityDialog) within an event handler. — jondavidjohn
– jondavidjohn, Commented Dec 22, 2011 at 16:34
@jondavidjohn: It'd be much clearer if the whole thing about "buttons" and "activities" were abstracted away. Meanwhile, he uses this on one line then again on the next in the same scope, but complains that one of these usages evaluates to something he's not expecting? That makes no sense. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Dec 22, 2011 at 16:36
Probably because he doesn't understand something... how dare he ask a question about something he doesn't understand... oh wait... where are we again? — jondavidjohn
– jondavidjohn, Commented Dec 22, 2011 at 16:38

jondavidjohn · Accepted Answer · 2011-12-22 15:54:30Z

1

You might try this...

function ActivityDialog(_divId, _title) {

    // Store the ActivityDialog context
    var self = this;

    function addButton() {
      var buttonElement = document.createElement('input');
      buttonElement.setAttribute('type','button');
      buttonElement.setAttribute('class','button');
      buttonElement.setAttribute('id','updateButton-' + id););
      buttonElement.onclick = this.updateAction;
    };

    function updateAction() {
      var buttonId = this.id;
      self.sendUpdateRequest(stringUrl); // <--------------------- 
    };

    function sendUpdateRequest(url) {
      // something...
    };

}

Because your using updateAction as a event handler, you correctly see that this will be the button that generates the event. Storing the initial context of the ActivityDialog will allow you to maintain access to it even within event handlers.

edited Dec 22, 2011 at 15:54

answered Dec 22, 2011 at 15:33

jondavidjohn

62.5k21 gold badges120 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

unfortunately, i've already the problem:sendUpdateRequest is not defined. stringurl is correctly valued (i'm using firebug for debugging).. the button creation happens in a function defined in object ActivityDialog. i need to refer to sendUpdareRequest that is another ActivityDialog function..

Collectives™ on Stack Overflow

I need to access event context AND object context in event handler

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related