Classes and Prototype [HELP]

CMellor · 11-11-2007, 11:51 PM

Hello,

I've made a 'comments' function on my website's user profile page, and when a comment is posted, it posts/appears instantly, with the magic of AJAX. I was looking through the Prototype API documents to see if they've added anything new to go along with the new 1.6 release. They've changed up there 'Class' function to make it easier to use. Now I've never actually never used classes, and not just in Javascript... in PHP neither. (I need to convince myself it's not too scary to start to learn it, lol) I decided to have a crack at the Prototype's class functions and I thought if I could get the concepts of it, I'll re-write my comment posting function to work with a class, that way I can add to it, like for when I want to delete comments in the same way.

I did a little test, something simple:

Code:

<a href="#" onclick="effect.show(); return false">Show</a>&nbsp;<a href="#" onclick="effect.hide(); return false">Hide</a>
<div id="holder">This is some content</div>

<script language="javascript">
  var Comment = Class.create({
    initialize: function(element) {
	  this.element = element;
	},
	
	show: function() {
	  new Effect.Appear(this.element);
	},
	
	hide: function() {
	  new Effect.Fade(this.element);
	}
  });
  
  var effect = new Comment('holder');
</script>

Success! I managed it with little effort, so I thought I'd have a crack at re-writing my function, but I've come to a complication, and I can't see anything in the Prototype documents that could help, so hopefully someone here could help; I've seen some people here know a thing or two about Prototype.

Here's my function:

javascript Code:

var Comments = Class.create({
    initialize: function(form) {
      username = '{/literal}{$smarty.get.uid}{literal}';
      this.username = username;
      this.form = form
    },
    // Post a comment
    post: function() {
      if(Spry.Widget.Form.validate(this.form) == true) {
        new Ajax.Updater('user_comments', 'configs/ajax_functions.php?profile_comment=post', {
          insertion: Insertion.Top,
          parameters: {
            user: this.username,
            comment: $F('comment')
          },
          onLoading: function() {
            $('comment_button').disable().value = 'Adding Comment';
            $('comment').clear().disable()
          },
          onSuccess: function() {
            $('comment_button').value = 'Comment Posted';
          }
        });
      }
    }
  });
  
  var comment = new Comments('post-comment');

Then on my form, I use onSubmit like so:

html Code:

<form id="post-comment" onsubmit="comment.post(); return false">

Now when I submit the form, in Firebug I get an error saying:

Quote:

comment.post is not a function

I've tried moving stuff around, but to no avail, it always comes back with that error.

If anybody has any idea on my situation, I look forward to a response from ya :)

Thanks a lot!