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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
That''s a really long post, so rather than reply to individual pieces
how about just a quick example...
This JS would be in an included JS file, in your document''s head:
function initializePage(){
$(''my-div'').observe(''click'', divClicked);
}
function divClicked(event){
var myDiv = event.element();
}
Event.observe(document, ''dom:loaded'', initializePage);
Then your HTML would be JavaScript free.
-justin
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
To address one of your other questions, regarding attaching events to
content that is loaded through Ajax. You need to use callbacks to
accomplish this, such as onComplete or onSuccess.
function attachListeners(){
// attach your observers to the new elements on the page
}
new Ajax.Request(''/some/url'', { onSuccess: attachListeners });
Have fun.
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Justin, Yeah, that was a huge post. I wanted to be thorough though. Anyway, I''ll give these a shot. I''m still learning Ajax so it can stump me at times. Thanks again, BN On Jan 23, 10:03 am, "Justin Perkins" <justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> To address one of your other questions, regarding attaching events to > content that is loaded through Ajax. You need to use callbacks to > accomplish this, such as onComplete or onSuccess. > > function attachListeners(){ > // attach your observers to the new elements on the page} > > new Ajax.Request(''/some/url'', { onSuccess: attachListeners }); > > Have fun.--~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hey Brent,
I think scriptaculous was just giving out the "just below" as an
example. Really you should call all event listeners at the very
bottom of the page, that way the browser has more time to load DOM
objects then execute JS code that is relying on loaded DOM objects.
The alert window idea definitely solidifies that idea.
Alternatively you can execute all of your listeners in the
"showMainMenu" method and I think you''d have better success.
On Jan 23, 12:39 pm, BrentNicholas
<BrentNicho...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Justin,
>
> Yeah, that was a huge post. I wanted to be thorough though.
>
> Anyway, I''ll give these a shot. I''m still learning Ajax
so it can
> stump me at times.
>
> Thanks again,
>
> BN
>
> On Jan 23, 10:03 am, "Justin Perkins"
<justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > To address one of your other questions, regarding attaching events to
> > content that is loaded through Ajax. You need to use callbacks to
> > accomplish this, such as onComplete or onSuccess.
>
> > function attachListeners(){
> > // attach your observers to the new elements on the page}
>
> > new Ajax.Request(''/some/url'', { onSuccess:
attachListeners });
>
> > Have fun.
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---