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!

Karl · 11-12-2007, 03:25 PM

Your code looks fine. Have you made sure you've got the latest version of Prototype as you're using the latest syntax for creating class', which wont work with older versions.

I created a skeleton of your Comemnts class and it worked fine for me, so you could use this as a test.

Code:

<html>
<head>
<script language="JavaScript" src="prototype.js"></script>
<script language="JavaScript">

var Comments = Class.create(
{
	initialize: function() 
	{
		alert('init');
  	},
  
  	// Post a comment
  	post: function() 
  	{
  		alert('post');
  	}
});

var comment = new Comments(); 
comment.post();
        
</script>
</head>
</html>

Wildhoney · 11-12-2007, 05:31 PM

I suppose the question is, what version of Prototype are you using, CMellor?

CMellor · 11-12-2007, 08:17 PM

The newest one, 1.6.

I tried your code Karl but got some errors about the initialize function, which is weird because it looks good to me.

I'll keep trying I guess...

CMellor · 11-12-2007, 09:14 PM

Weird, it just wasn't working with the inline event handler, so I used an Event.observer

Code:

Event.observe('post_comment', 'submit', function() {
	comment.post();
});

and it worked, but that lead to another error *sigh*

I have it so if the textarea is left blank upon submit, it will show an error and do nothing more, I'm using Spry, which has it's own method's of doing things. It's simply:

Code:

if(Spry.Widget.Form.validate(this.form) == true) {
  alert('Test');
}

If the textarea wasn't blank, then the alert would appear. What I'm getting is, when I submit the blank form, I get the alert and then the error message... it didn't do this in the normal function, but it's doing it in the class, which is weird.

Karl · 11-13-2007, 07:42 PM

Hmm, everything looks fine. What error are you getting and what line/section of code is the error pointing to.