Computer Nerd Help Needed - AJAX PHP etc

[Slide Panda]

- Basically I'm cobbling a couple things together based on the prototype framework. I've got a form with validation based on Protoform (http://cssrevolt.com/upload/files/protoformclass/), and I'm trying to fire the validation errors to a Growl

This one:
http://examples.kevinandre.com/growler1.0.0/index.html

I can create new growls instances from the form validation... too well. For each error message I end up with a whole new instance - so they just end up sitting on top of each other in the z-axis, as opposed to getting a set of message windows in one Growler

If I were mocking up on a single page - this get's me the proper result:
<script type="text/javascript">
document.observe("dom:loaded", function() {
   var g = new k.Growler({location:"tl"});
       g.growl("Long lasting notice (15s)", {life: 15});
     g.growl("Long lasting notice (20s)", {life: 20});
});
</script>

This is,in effect, what I'm ending up with:
<script type="text/javascript">
document.observe("dom:loaded", function() {
   var g = new k.Growler({location:"tl"});
       g.growl("Long lasting notice (15s)", {life: 15});
});
</script>
<script type="text/javascript">
document.observe("dom:loaded", function() {
   var g = new k.Growler({location:"tl"});
     g.growl("Long lasting notice (20s)", {life: 20});
});
</script>

I'm just not sure how to fire something from my form validation or php email at something that can create a single Growler to display the various growls I want... or to have the growler script looking for page events as a trigger.


Just as an FYI there's the JS that's used in the example - you can see it creates one Growler and then the growl messages are triggered from a click.

document.observe("dom:loaded", function() {
   dp.SyntaxHighlighter.HighlightAll('code');
   var g = new k.Growler({location:"tr"});
   $("e1").observe("click", function(e){
      g.growl("Simple notice");
   });
   $("e2").observe("click", function(e){
      g.growl("...with header", {header: "Growler Notice"});
   });
   $("e3").observe("click", function(e){
      g.growl("Long lasting notice (20s)", {life: 20});
   });
   $("e4").observe("click", function(e){
      g.growl("Sticky notice", {sticky: true});
   });
   $("e5a").observe("click", function(e){
      g.growl("Candy is good", {header: "Candybar Theme", className: "candybar", sticky: true});
   });
   $("e5b").observe("click", function(e){
      g.growl("Visit <a href='http://kproto.googlecode.com' target='_blank'>kProto</a> for more Prototype classes.", {className: "plain"});
   });
   $("e5c").observe("click", function(e){
      g.growl("The funnest iPod ever. Millions of songs. Thousands of movies. Hundreds of games. <a target='_blank' href='http://www.apple.com/ipodtouch/whatsnew.html'>Learn more</a>", {header: "iPod Touch", className: "macosx", sticky: true});
   });
   $("e5d").observe("click", function(e){
      g.growl("This is a test to see how well the theme handles text that is long. It should stretch height-wise.", {header: "At Work Theme", className: "atwork"});
   });
   $("e6").observe("click", function(e){
      g.info("Something good happended", {life: 10});
   });
   $("e7").observe("click", function(e){
      g.warn("Take heed", {life: 10});
   });
   $("e8").observe("click", function(e){
      g.error("Something bad happened", {life: 10});
   });
   $("e9").observe("click", function(e){
      g.growl("Notice w/Events", {created: function(){
         $("noticeevents").innerHTML  = "<div>Notice created...</div>";
      }, destroyed: function(){
         $("noticeevents").innerHTML  = "<div>...Notice destroyed</div>";
      }});
   });
});

[darylbowden]

I don't understand exactly what you're trying to do, but in your example the only event you're attaching anythign to is the DOM loaded, which only loads once per page refresh (obviously).  In the example below yours, they are instantiating one instance of the growler and attaching multiple event listeners to it so that it's observing the clicks.  In your instance, I would simply attach an event listener to the submit of your form (assuming that's when you want it to fire) and that would then trigger the event.  So, in the DOM ready you instantiate your growler and then in the event listeners, you use the instance you created in the DOM ready and then fire through that single instance.

If I misread anything you were trying to do, let me know.  But, my biggest tip for you would be to ditch prototype and use jQuery - it's far superior and lighter weight.  You can reach me offline at my email in my profile if you want to ask any other questions or explain it further.

[darylbowden]

And..... here's a jQuery plugin that will handle all this BS for you http://plugins.jquery.com/project/Growl

[Slide Panda]

Thanks Darryl - I'll give that one a go. But there's already some stuff in place based on the prototype framework and I don't think they will play nice together. Also, I think I'm going to have the same basic issue in jQuery as in Prototype.. it's not the framwork that's the problem, so

I'll start from the beginning...

I've got an HTML based page that is a contact form (Lets call it Contact.html), that posts it's form data to a PHP mailer (mail.php) that, sends a mail and fires back a little go/no-go message to Contact.html.

Just to rough it in, mail.php just wrote some plain HTML on Contact.html. Of course, this looks a bit rough since if, for some odd reason, the person uses the form twice, now they have two go/no-go messages.

Next stage was form validation. That's where Protoform (http://cssrevolt.com/upload/files/protoformclass/) can in to the equation. Protoform is a validator based on the Prototype framework. It also just writes some HTML to the page if peope mess up. Though it does clear out previous messages when they try again, and do better.

So between mail.php and protoform I have two difference things writing messages about the same form to my HTML page. It intent of using a Growler was to condense those messages into one format (growls) that gave the user the info they needed, but were not persistent on the page.

So that's the story...


I know that example I tossed out fired on DOM ready - it was just a brute force test to replicate the results I was getting from the protoform validation. Each validation error message created a new Gowler instance, with a single growl in it - as opposed to one Growler with multiple growls, like it's supposed to be. - So where in my first post it reads 'This is,in effect, what I'm ending up with:' then some JS, generates the two Growlers...
And I don't know how to watch for/trigger an event when mail.php or protoform writes to the HTML, that the Growler script can pick up.

The example they give, that I pasted, just uses "click"... great easy peasy... That I can do no problem. Its when stuff is popping in the the HTML from other files is where I'm lost.

[darylbowden]

Ahh, seems like your best bet would be to modify protoform and place the growler code in there so that you have better control over when things are happening. 

Unfortunately, like most things in our world, it's really tough to debug the issues without having the code and a working environment in front of me.