Howdy all,

So this is what I posted in another forum, however I see there is very
little traffic there. So I'll try here.

I'm not sure if I'm doing Event.observe wrong, or if there is some bug
in my code, or if I've stumbled across a bug in Prototype (Though I
doubt it).

The reason I'm thinking my Event.observe was done inproperly is that I
got an 'object required' at 3818 in prototype.js - more in the 2nd
section.

There are two posts below.
1st) my orginal post
2nd) a weird behaviour I got after playing around with 'alert()' in
the scripts.

1st)-----------------------------------------------------------------------------------------------------------------

So i'm trying to keep from littering my HTML with <script> tags. I'd
like all my javascript to be in an included file at the top of the
page.

Anway, I understand the following and how it works:

<h2 id="mydiv">Click me!</h2>
  <script type="text/javascript" language="javascript">
     Event.observe('mydiv', 'click', function(e){ alert('clicked
me!') });
  </script>

Ok, fine. It follows the rule that an 'Event.observe', must be placed
after the element being observed. See: 
http://wiki.script.aculo.us/scriptaculous/show/Event.observe

However, this litters my HTML with js and tightly couples the UI to
the behaviour. Bad...

So I've beek mucking around with this, and it does not work.

Before I show the code I'll out line it.

1) The page is called and window.onload calls a function that uses
Ajax.updater to load the menu into a DIV on the page.

2) Right below the Ajax.updater in showMainMenu, I try to hold off
registering the event until the DOM is done loading (just grasping at
straws here), and attempt to register the event that watches for what
link you clicked on the menu that was loaded in dspMainMenu.cfm.

/* init section */
window.onload = function() {
        showMainMenu();
};

function showMainMenu()
{
        new Ajax.Updater('workingDIV','dspMainMenu.cfm?
#session.UrlToken#',
        {
           method: 'get'
        }
                );
        Event.observe(window, 'load', function() {
           Event.observe('menuProfessionalOutreach', 'click',
addProfessionalOutreach);
        });
}

/* actions */
function addProfessionalOutreach(event) {
        new
Ajax.Updater('workingDIV','dsp_addProfessionalOutreach.cfm?
#session.UrlToken#',
        {
          method: 'get'
        }
        );
}

<div id="menuProfessionalOutreachDIV">
        <a href="#" id="menuProfessionalOutreach">
        <img src="" title="Professional Outreach Image">
        Professional Outreach
        </a>
</div>

So what am I not doing right here?

I have a sneaky suspicion that it's something to do with the
dspMainMenu.cfm not being 'read into' the DOM?? Or evaluated into the
DOM?

Should I be using Ajax.Request instead? Ajax.Updater seemed cleaner
since the call to dspMainMenu.cfm was just being dumped into a DIV
and
didn't need to do much.

Though maybe my events should be registered in the 'onSuccess'
function call of Ajax.Request...??

Thanks for your time and assistance,
BN

2nd)-------------------------------------------------------------------------------------------------------
I was just messing around with seeing what runs and does not run in
the scripts and found that if I add the 'alert()' below, the page
works fine with no errors.

Intially I was getting an error at line 3818 - Object Required in the
Prototype.js file. I assumed I was just defining my Event.observe
incorrectly. Maybe this is a bug in Prototype? I'm still leaning
towards me doing something wrong.

But this observation is interesting...

function showMainMenu()
{
        new Ajax.Updater('workingDIV','dspMainMenu.cfm?
#session.UrlToken#',
        {
           method: 'get'
        }
                );
        Event.observe(window, 'load', function() {
           alert('in here');   // adding this caused the page to
start
running fine
           Event.observe('menuProfessionalOutreach', 'click',
addProfessionalOutreach);
        });
}

contents of dspMainMenu.cfm

<div id="menuProfessionalOutreachDIV">
        <a href="#" id="menuProfessionalOutreach">
        <img src="" title="Professional Outreach Image">
        Professional Outreach
        </a>
</div>

--~--~---------~--~----~------------~-------~--~----~
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