Proper way to call javascript class method from html event

Question

I have a class Foo, with a method that generates HTML that is displayed. I want the HTML to have an onclick event handler that calls Foo.clickHandler. The problem is that I don't know what this particular instance of Foo is named. Likewise, the onclick event has no way of knowing how to access this instance of Foo. Here is some code:

function Foo(){
    this.nonStaticVariable='Something non-static (different for every instance of Foo).';
    this.getHTML=function(){
        return '<a href="javascript:void(0);" onclick="/* How do I call Foo.clickHandler? */">Click Me!</a>';
    }
    this.clickHandler=function(){
        alert(nonStaticVariable);
    }
}

The point of the non-static function is to show that the onclick needs to call the correct instance of Foo.

I have thought about passing a string to Foo that contains the variable name that contains Foo, but this seems anti-OOP:

function Foo(container){
    this.container=container;
    this.nonStaticVariable='Something non-static (different for every instance of Foo).';
    this.getHTML=function(){
        return '<a href="javascript:void(0);" onclick="'+container+'.clickHandler();">Click Me!</a>';
    }
    this.clickHandler=function(){
        alert(nonStaticVariable);
    }
}

var fooInstance=new Foo('fooInstance');

What do you suggest?

I am open to jQuery solutions as well.

Bryan Downing · Accepted Answer · 2012-05-17 19:51:55Z

1

Do nonStaticVariable and clickHandler need to be accessible outside of Foo? If not, you could simply do something like this:

function Foo(){
    //changed these to private variables only accessible from within Foo
    var nonStaticVariable='Something non-static (different for every instance of Foo).';
    var clickHandler = function(){
        alert(nonStaticVariable);
    }
    this.getHTML=function(){
        return $('<a href="#">Click Me!</a>').click(clickHandler);
    }
}


var fooInstance = new Foo();

var button = fooInstance.getHTML();


$("#container").html(button);

answered May 17, 2012 at 19:51

Bryan Downing

15.5k3 gold badges43 silver badges62 bronze badges

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

Comments

Alex · Accepted Answer · 2012-05-17 19:43:53Z

1

I hope I understand your question. I think you are running into the issue whether to use singletons or not?

personally i'd choose where I'm going with it, for example:

Singleton:

<!-- HTML -->
<a href="javascript:Foo.clickHandler(this)">singleton click</a>

//Javascript

// blah blah Foo = ....
this.clickHandler = function(what)
{
   alert(what);
}

OR

Prototyped:

// blah blah setup Foo & perhaps prototype

var element = document.createElement("a"); // or getelementbyid etc
element.onClick = function()
{
   alert(this);
}

not sure if I explained that too well.

Perhaps look over here: http://www.selfcontained.us/2008/12/23/javascript-widget-approaches-singleton-vs-prototype/

answered May 17, 2012 at 19:43

Alex

3,7915 gold badges41 silver badges60 bronze badges

2 Comments

Joel Over a year ago

I think I have an idea from this. If I used jQuery to create an element, then attached an event with a reference to my eventHandler, and added the elements to the DOM, would the reference be converted to a string and added to an onclick attribute? Or would it stay a reference and call the correct eventHandler when clicked?

Alex Over a year ago

yeah, jquery makes this really easy for example: $("a.my-clickablestuff").click(function(){alert($(this)}); would do it all for you and you wouldnt even need to add href="javascript... on the links.

Huangism · Accepted Answer · 2012-05-17 19:28:07Z

0

Hmmm... I am not the best OO programer but you can pas a hash, it's kind of the same as what you got

var fooHash = {name: "nameHere", type: "xxx", whatever: "whatever"};
var fooInstance = new Foo(fooHash);

then in your Foo object you just need to add something like

function Foo(o){
    this.name = o.name;
    this.type = o.type; // etc....
}

so basically you replace container with this.name. there is probably a better way but this is all I got

answered May 17, 2012 at 19:28

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

3 Comments

Huangism Over a year ago

also if you use jquery, it would be easier

Joel Over a year ago

I'm open to jQuery solutions.

Huangism Over a year ago

well with jquery you can simply add the name of the variable to the anchor tag as an attribute like <a rev="nameOfVar">. since we are using jquery you don't need onclick, you simply capture the click with onclick function or newer versions of it $('elementCSSselector').onclick(function(){ //do whatever }); inside the onclick handler you can grab the attribute of the anchor tag, in this case rev, and output it. If you don't know jquery I suggest you google or read the docs, it's fairly simple. for OO, put the onlcick inside of a evenhandler inside of your object

Collectives™ on Stack Overflow

Proper way to call javascript class method from html event

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related