I am trying to implement something in the style of Draggables, where I
can specify an HTML element that I want to place comments against by
clicking on the element.  So I have copied the style of Draggables and
created the following:

<html>

<head>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></
script>

<script type="text/javascript">

var Commentables = {
  commentable: [],

  register: function(commentable) {
    this.commentable.push(commentable);
  }

}

var Commentable = Class.create();

Commentable.prototype = {
  comments: [],
  object_ID: '',

  initialize: function(elmid) {
    this.object_ID = $(elmid);
    this.eventOnClick = this.newComment.bindAsEventListener(this);
    Event.observe(elmid, 'click', this.eventOnClick, false);
    // save the commentable object away.
    Commentables.register(this);
  },

  newComment: function(event) {
    alert('i have been clicked: '+this.object_ID.id);
    this.comments.push('a comment on '+this.object_ID.id);
    this.showComments();
  },

  showComments: function() {
    this.comments.each( function(c) { alert(c) } )
  }
}

Event.observe(window, 'load', page_loaded, false);

function page_loaded(evt) {
  var one = new Commentable('firstone');
  var two = new Commentable('secondone');
}

</script>

</head>

<body>
  <div id="firstone">some text just to give the div a width</div>
  <div id="secondone">more text here just for padding.</div>
</body>
</html>

So basically I have two clickable DIVs, and when you click on each, it
displays an alert telling you which was clicked by calling newComment,
and then displays all the comments saved against that DIV.

It always displays the correct Object_ID, however when I call
showComments, it displays an altert for every comment on ALL
commentable objects.

ie click on firstone:

alert('i have been clicked firstone');
alert('a comment on firstone');

then click on secondone (without refreshing the page):

alert('i have been clicked secondone');
alert('a comment on firstone');    // ****** why is this one coming
out too??
alert('a comment on secondone');

I reckon my understanding of how javascript works going wrong here,
but why do the contents on the comments array for both object get
shown when I thought that only the contents of the one associated with
the DIV I click on should?  Have I created my objects wrong?

Any help is much appreciated as I am baffled about this one!

Thanks,

Stephen.


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby 
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to