JavaScript OOP problem

Question

I create windows like this:

var obj = document.createElement('div'); 
obj.className = 'window';
obj.style.width = 300 + 'px';
obj.style.height = 200 + 'px';
obj.style.left = 30 + 'px';
obj.style.top = 200 + 'px';     

//and so on

and what I need is to attach some data to each window. The data will be grabbed via Ajax and displayed in the windows. How should I do it so that each window hold its own unique data?

I don't need to display the whole data every time and this data would need be organized before being displayed, so I can't just add it with innerHTML. I need a way to hold it somewhere else where I could easily get it and then display it with innerHTML.

This question is similar to: How can I attach "meta data" to a DOM node?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Aug 1, 2024 at 8:56

Reigel Gallarde · Accepted Answer · 2010-06-10 04:53:15Z

1

Could you use jQuery? jQuery has something called data so in your example you could do:

var obj = $('<div></div>');  
obj.addClass('window');  
obj.data('foo', 'setting some data here');

you can access your data later on with:

obj.data('foo') // will return 'setting some data here'

edited Jun 10, 2010 at 4:53

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

answered Jun 10, 2010 at 4:37

Michal Kuklis

91111 silver badges15 bronze badges

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

Comments

Fopfong · Accepted Answer · 2010-06-10 05:02:47Z

1

Just use

obj.data = yourData;

to get the data use obj.data

edited Jun 10, 2010 at 5:02

answered Jun 10, 2010 at 4:29

Fopfong

2992 silver badges4 bronze badges

1 Comment

Pointy Over a year ago

things are case-sensitive, so you mean "obj.data", not "obj.Data"

Lauri Lehtinen · Accepted Answer · 2010-06-10 04:29:05Z

0

A wild guess -

obj.data = 'Whatever'

And later

obj.innerHTML = format(obj.data);

I tried this in my Firebug console, worked there. Maybe worth trying in others?

answered Jun 10, 2010 at 4:29

Lauri Lehtinen

10.9k2 gold badges34 silver badges30 bronze badges

Comments

Christian C. Salvadó · Accepted Answer · 2010-06-10 04:50:53Z

You could build your own constructor function to create your own window objects and store the DOM element and the data on each instance, e.g.:

function MyWindow (width, height /*, ...*/) {
  var data = {}; // here the data will be stored
  // the DOM element
  this.element = document.createElement('div'); 
  this.element.className = 'window';
  //...
  // a method for get and set key/value pairs:
  this.data = function (key, value) {
    if (typeof value == 'undefined') {
      return data[key];
    } else {
      data[key] = value;
      return this;
    }
  };
}

MyWindow.prototype.sharedMethod = function () {
 // shared across all instances, you can access here public members
 // like the `this.data` method and the `this.element` DOM element
};

Example usage:

var win1 = new MyWindow(300, 200);
win1.data('key1', 'value1').data('key2', 'value2'); // chainable method :)

// to access the DOM element:
win1.element;

// to get the values
win1.data('key1'); // "value1"
win1.data('key2'); // "value2"

var win2 = new MyWindow(300, 200);
win2.data('someData', {foo: 'bar', baz: true});
win2.data('someData').foo; // "bar"

Collectives™ on Stack Overflow

JavaScript OOP problem

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related