Rails spinoffs - Aug 2007 - prototype: Event.observe 'click' for $$('a.popout')

Hi all first time im posting here, hope what i''ve written is clear.

I''m trying to make a popup work using event.observe for all anchor
tags with the CSS selector ''popup''.

in the HTML i have this:

< a href="somelink.php" class="popup">Click to go
someplace </a>

in my javascript I have a:

Event.observe(window, ''load'', function (){

});

wrapper with code inside the event.observe code inside


1. heres the 1st method I tried:

$$(''a.popout'').each( function(thePopout) {	Event.observe(
thePopout,
''click'',  popout);  }  );

function popout()
{
	window.open(this.href, this.innerHTML,
''width=500,height=500'');
	return false;
}

-----------------------
In IE i get a popup window with a 404 error. Seems like the
''this''
reference isnt having the right effect

In Firefox I get the correct popup window however the original page
also changes to the href location.  Seems like return false; isnt
having the desired effect.
-------------------

2. the second method I tried

$$(''a.popout'').each( function(thePopout) {	Event.observe(
thePopout,
''click'',  popout);  }  );


function popout(event)
{
	var element = Event.element(event);
	window.open(element.href, element.innerHTML,
''toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=yes,copyhistory=no,width=500,height=500'');
	return false;
}

------------------------------------
In IE everything works great!!
In Firefox I still get the same problem as before, it appears as if
the return false; at the end of the function is not working to tell
firefox not to follow the link
-----------------------------------

I have also tried using an anomyomous function within Event.observe
and just to ease my brain, i tried this:

$$(''a.popout'').each( function(s) {	Event.observe( s,
''click'',
popout.bindAsEventListener(s)  ) } );

which shouldnt be any different to a standard event.observe, and
isn''t!

thanks for reading, any insights would be much appreciated.

The reason im doing it this way and not in the html :
< a href="somelink.php" class="popup"
onclick="popup(); return
false;">Click to go someplace </a>

is to keep the html and javascript separate and to make changing
normal links to popups really easy in the future (and to style the
popups differently to normal links)


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

On Aug 15, 2007, at 10:15 PM, wal5hy wrote:
> ------------------------------------
> In IE everything works great!!
> In Firefox I still get the same problem as before, it appears as if
> the return false; at the end of the function is not working to tell
> firefox not to follow the link
> -----------------------------------
This part I can help you with. Use Event.stop() instead of return 
false. That''s the cross-browser way to stop the event from bubbling up.

Walter


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

hi wal5hy,

three thought on this:

1. events you observe do not act like events you assign a single
callback to. while element.onclick = function(){return false;} has the
desired effect, it won''t have it when using Event.observe() because
observed events are not finished when the callback is through. this way
you can have more than one callback observing the same event.
walter is right Event.stop() will help you.

2. you have a scope problem. when popup() is called your
''this'' will not
necessarily point to the anchor. it will more likely loose its scope and
 point to window instead. you want to look up bindAsEventListener()[1]
it will help you.

3. instead of this
$$(''a.popout'').each(function(thePopout){Event.observe(thePopout,''click'',popout);});
you could just use
$$(''a.popout'').invoke(''observe'',
''click'', popout);
which does the same here but imho is more elegant. no error though.


cheers
/christian

[1] http://prototypejs.org/api/function/bindAsEventListener


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

Or you could just switch over to using the new prototype 1.6_rc0 that
has been released which takes care of correcting the ''this''
scope and
also extends the event object so you can just use  e.stop().  So the
following should work (note: not actually tried - just off the top of
my head)

$$(''a.popout'').invoke(''observe'',
''click'', popout);

function popout(e)
{
        window.open(this.href, this.innerHTML,
''width=500,height=500'');
        e.stop();
}

On Aug 15, 11:36 pm, Christian Schaefer
<cae...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> hi wal5hy,
>
> three thought on this:
>
> 1. events you observe do not act like events you assign a single
> callback to. while element.onclick = function(){return false;} has the
> desired effect, it won''t have it when using Event.observe()
because
> observed events are not finished when the callback is through. this way
> you can have more than one callback observing the same event.
> walter is right Event.stop() will help you.
>
> 2. you have a scope problem. when popup() is called your
''this'' will not
> necessarily point to the anchor. it will more likely loose its scope and
>  point to window instead. you want to look up bindAsEventListener()[1]
> it will help you.
>
> 3. instead of this
>
$$(''a.popout'').each(function(thePopout){Event.observe(thePopout,''click'',popout);});
> you could just use
> $$(''a.popout'').invoke(''observe'',
''click'', popout);
> which does the same here but imho is more elegant. no error though.
>
> cheers
> /christian
>
> [1]http://prototypejs.org/api/function/bindAsEventListener

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

Thanks for all these great and quick replies, I''ll give them all a try
now and let you know what I find.


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