How to maintain connection between JS-object and its representation in the browser

[Roelf]

Hi,

What is the best way to maintain the connection between a javascript object, which is displayed in the browser as a viewable element (fe. a table)
I have a object constructor which takes some data, and presents it as a table, the constructor adds eventhandlers to the td's and the column headers. When a td or a header is clicked, i want a method of the object to run (fe. a sort routine for this table). but how do i attach the eventhandler so the method of the object is triggered.

for now i use a regular function which takes the tablename as a parameter and the actions are not performed at the js-object, but only at the table-representation of the object. This is ok because i have only one object displayed, but in the future there will be more. Also this way of coding is not so nice, because i have to set a lot of references because i cannot refer to "this"

example:

var namelist = new grid();
// with some more code i create a datagrid which is displayed in the browser.
// onclick handlers are attached to td-elements
// now i want to invoke a method of this grid: namelist, to run onclick, like: namelist.sort()
// but the namelist part in this call is the thing, i dont want to hardcode, but how can i code it so it will work?

Is the question clear enough?
Anyone knows the answer?

Roelf

[Kor]

I suppose you may insert your objects within <div></div> tags, and probably it would be easier to use "id" instead of "name".

<div id="whichever">oblect_here</div>

now you can do whatever DHTML methods can do with your object (of course, if you define your objects as new objects within the script)

... if I understood well your problem...

[Roelf]

in fact, i use the id of the div to get access to the table-representation. but i want to access the JS-object.
it contains a few arrays as properties, and i want to change these properties. Not only the table, but also the underlying properties of the object

[brothercake]

You can always call an object with its instantiated name.

If you go

var namelist = new grid();

then in the constructor you go something like

this.table = createElement('table');

then you can refer to the table as namelist.table


Yes?

[Roelf]

i know that, now the table is displayed in the browser, and an eventhandler is available for the td's onclick event. How do i attach the eventhandler that with an onclick event the namelist.sort() routine is called instead of performing dhtml actions to the table. I want to perform actions on the source of the table: the arraydata, not to the table itself

[brothercake]

what? what do you need to know how to do - how to make a method?

[Adam20002]

In the constructor you want to set event handlers of html elements to run methods and the problem you have is accessing the method through the object instance. Is this right ?

Adam

[Roelf]

ok, let me explain some more:

i have an object which contains data in a (2D) array. after doing some things with this data, i present it in a table. when the user clicks on a table header, i want to sort the array on this column. I can do that with the actual table the dhtml way, but i want to sort the underlying object data, the array. not only the presentation in the table.
for now i do the sorting within the table, rearrange the tr elements, but the object is not affected this way.

i have an object instantiated with
var namelist = new grid();

the grid constructor creates the array, the last method that i call is: namelist.display()
this method creates a table in the DOM. dynamically eventhandlers are attached:
cell.attachEvent("onclick", selectrow)
when a cell is clicked, i want a method of namelist to run: namelist.sort()

but if i instantiate another grid, like:

var carlist = new grid();
with an onclick event at the table representation, i want carlist.sort() to run without having to change code of my constructor.....

[brothercake]

You mean you want the sort method to be part of the grid object? Like this:

function grid()
{
namelist = this;
namelist.table = document.getElementById('tableID');
namelist.table.onclick = function()
{
//sort the array ...
//rewrite the table HTML ...
}
}

Is that what you mean?

[Roelf]

yeah, only instead of
namelist.table = document.getElementById('tableID');

i do it like

this.table= document.createElement("table");
// then create the table elements, and add the whole thing to the dom

[Roelf]

example:

<html>
<head>
<title>Problem</title>
<script type="text/javascript">
function grid (divToDisplayIn) {
this.message = "I am a grid";
this.container = divToDisplayIn;
}

grid.prototype.displaymessage = function () {
alert( this.message )
}

grid.prototype.display = function () {
var h1 = document.createElement("h1");
var h1text = document.createTextNode("Click me please")
h1.attachEvent("onclick", this.displaymessage);
h1.appendChild (h1text);
var root = document.getElementById(this.container);
root.appendChild(h1);
}
</script>
</head>

<body>
<div id="list">
</div>
<script type="text/javascript">
var list = new grid("list"); // instantiate a new grid, display it in the div with id="list"
list.display();
</script>
</body>
</html>


when the onclick eventhandler runs, "this" doesnt refer to the instance of the grid-object. The proper method is called, but "this" is gone
anyone knows how to avoid that?

[Adam20002]

when the onclick eventhandler runs, "this" doesnt refer to the instance of the grid-object. The proper method is called, but "this" is gone

Hi Roelf,

Yes this is what i was basically getting at in my previous post but probably didn't make it clear. I have had the same problem before and never managed to find a good solution. As you say it seems this dosen't work in that context. I will carry on looking at let you know if i find anything.

Adam

[glenngv]

if you would do this:

grid.prototype.displaymessage = function () {
var str='';
for (var i in this) str+=i + "=" + this[i] + "\n";alert(str)
}


you would notice that this refers to the window object not to the constructor.

See the possible solution from this similar thread:

http://www.codingforums.com/showthread.php?s=&threadid=10081

[brothercake]

Hm, maybe I'm not fully understanding; but why can you not just use the instantiated name?

h1.attachEvent("onclick", list.displaymessage);

or do you need to have more than one instance of the object?

[Vladdy]

Red - add
Blue - edit


grid.prototype.display = function () {
var h1 = document.createElement("h1");
var h1text = document.createTextNode("Click me please");
h1.grid = this;
h1.onclick= this.displaymessage; //makes it more than "IE Only"
h1.appendChild (h1text);
var root = document.getElementById(this.container);
root.appendChild(h1);
}

grid.prototype.displaymessage = function (e) {
var src = (e!=null && 'target' in e) ? e.target : this; // get source element - Gecko + IE - have not tested others

alert(src.grid.message )
}

[Roelf]

thanks vladdy, it works in IE now and thats ok by me, i couldnt get it to work in Mozilla. It gives me the error "src.grid has no properties" at the line with the alert in it.
Maybe later i attempt to make it work in moz. For now this is enough

thanks again