Hi,
I am new to Prototype and could use some assistance. I am using
Prototype 1.6.0.1.
Scenario:
I have the following JS script elements included in the HEAD section
of every page. This effectively creates an auto-confirm functionally
when a user attempts to leave a modified form. Any form not decorated
with the "ignoreForm" CSS class, will first prompt the user to confirm
they want to exit without saving.
<!-- Create class which will allow forms to monitor themselves for
changes -->
<script type="text/javascript">
var FormWatch = Class.create();
FormWatch.prototype = {
initialize : function(form, options) {
this.submitted = false;
this.form = $(form);
// Let''s serialize this.form and store it...
// This will store the "original" state of the form
this.formcontents = $(form).serialize();
// On submit, we let the user changes pass thru without
prompting
Event.observe(this.form, ''submit'', function()
{this.submitted true; }.bind(this));
// On beforeunload event, we check for changes using our
confirmExit
// method and prompt user to confirm, if necessary
Event.observe(window, ''beforeunload'',
this.confirmExit.bind(this));
// Event.stop(ev);
},
confirmExit : function(ev) {
// Serialize the form contents again
this.newcontents = this.form.serialize();
// Compare latest form contents with original form
contents
// to see if anything has changed.
if ((this.formcontents != this.newcontents) && !
(this.submitted)) {
ev.returnValue = ''You have unsaved modifications to the
form data. If you leave without clicking the Save button, your changes
will be lost.'';
// return Event.stop(ev);
}
}
}
</script>
<script type="text/javascript">
// Utilizes Prototype JS lib
// On window load, loop thru forms on page which should not be
ignored.
// Register these forms with our modification listener so we can
prompt
// user to save changes. (see listener above)
Event.observe(window, ''load'', function() {
// Get all forms on page
var formArray =
$A($(document.getElementsByTagName(''form'')));
// Loop thru forms, register any forms which do NOT have the
CSS
// class "ignoreForm"
formArray.each(function(aForm) {
if (!($(aForm).hasClassName(''ignoreForm''))) {
new FormWatch(aForm);
}
});
// Get all elements with a ignoreClick
var linkArray = $A($(document.getElementsBy))
});
</script>
The above code works fine.
I need to incorporate the ability to selectively disable the
beforeUnload logic based on the CSS class of the element which
triggered the onPageUnload. In other words, I want the ability to
apply a CSS class of "ignore" to an <A> or <INPUT> element
and have
the beforeUnload logic be ignored. This way, if I have a link which
opens a popup or something similar, I do NOT prompt the user whether
they want to save the form. The form processing would proceed as
usual. I don''t care how this is done, I played around with Event
listeners using CSS selectors and also thought about wrapping events,
but could not figure this out.
Any help would be appreciated.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Bastian Feder
2008-May-21 13:41 UTC
Re: Prototype: How to ignore onClick from certain elements
Hey!
my first guess is to find the element who is causing the event and
then stopping it.
I mean something like:
--- snip ---
confirmExit : function(ev) {
// my suggest:
var activator = Event.element(ev);
if (activator.hasClassName(''ignore'')){
Event.stop(ev);
// alert("event stopped");
}
// end
// Serialize the form contents again
this.newcontents = this.form.serialize();
// Compare latest form contents with original form contents
// to see if anything has changed.
if ((this.formcontents != this.newcontents) &&
! (this.submitted)) {
ev.returnValue = ''You have unsaved modifications to the
form data. If you leave without clicking the Save button, your changes
will be lost.'';
// return Event.stop(ev);
}
--- snip ---
I did not test this since I currently have no time for deeper
investigation, but I hope this helps.
hf
Bastian
On Wed, May 21, 2008 at 3:20 PM, Mike P
<mpuglin-/E1597aS9LQAvxtiuMwx3w@public.gmane.org>
wrote:>
> Hi,
>
> I am new to Prototype and could use some assistance. I am using
> Prototype 1.6.0.1.
>
> Scenario:
>
> I have the following JS script elements included in the HEAD section
> of every page. This effectively creates an auto-confirm functionally
> when a user attempts to leave a modified form. Any form not decorated
> with the "ignoreForm" CSS class, will first prompt the user to
confirm
> they want to exit without saving.
>
>
> <!-- Create class which will allow forms to monitor themselves for
> changes -->
> <script type="text/javascript">
>
> var FormWatch = Class.create();
>
> FormWatch.prototype = {
> initialize : function(form, options) {
> this.submitted = false;
>
> this.form = $(form);
>
> // Let''s serialize this.form and store it...
> // This will store the "original" state of the form
> this.formcontents = $(form).serialize();
>
> // On submit, we let the user changes pass thru without
> prompting
> Event.observe(this.form, ''submit'', function()
> {this.submitted > true; }.bind(this));
>
> // On beforeunload event, we check for changes using our
> confirmExit
> // method and prompt user to confirm, if necessary
> Event.observe(window, ''beforeunload'',
> this.confirmExit.bind(this));
> // Event.stop(ev);
> },
> confirmExit : function(ev) {
> // Serialize the form contents again
> this.newcontents = this.form.serialize();
>
> // Compare latest form contents with original form
> contents
> // to see if anything has changed.
> if ((this.formcontents != this.newcontents) && !
> (this.submitted)) {
>
> ev.returnValue = ''You have unsaved modifications to
the
> form data. If you leave without clicking the Save button, your changes
> will be lost.'';
> // return Event.stop(ev);
> }
> }
> }
>
>
> </script>
>
> <script type="text/javascript">
> // Utilizes Prototype JS lib
> // On window load, loop thru forms on page which should not be
> ignored.
> // Register these forms with our modification listener so we can
> prompt
> // user to save changes. (see listener above)
>
> Event.observe(window, ''load'', function() {
>
> // Get all forms on page
> var formArray =
$A($(document.getElementsByTagName(''form'')));
>
> // Loop thru forms, register any forms which do NOT have the
> CSS
> // class "ignoreForm"
> formArray.each(function(aForm) {
>
> if (!($(aForm).hasClassName(''ignoreForm''))) {
> new FormWatch(aForm);
> }
>
> });
>
> // Get all elements with a ignoreClick
> var linkArray = $A($(document.getElementsBy))
>
> });
>
>
> </script>
>
>
>
> The above code works fine.
>
> I need to incorporate the ability to selectively disable the
> beforeUnload logic based on the CSS class of the element which
> triggered the onPageUnload. In other words, I want the ability to
> apply a CSS class of "ignore" to an <A> or <INPUT>
element and have
> the beforeUnload logic be ignored. This way, if I have a link which
> opens a popup or something similar, I do NOT prompt the user whether
> they want to save the form. The form processing would proceed as
> usual. I don''t care how this is done, I played around with Event
> listeners using CSS selectors and also thought about wrapping events,
> but could not figure this out.
>
> Any help would be appreciated.
>
>
>
> >
>
--
--
spread the word ... see www.browsehappy.com ;o)
Calvin: Weekends don''t count unless you spend them doing something
completely pointless.
Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d)
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Bastian Feder
2008-May-21 13:43 UTC
Re: Prototype: How to ignore onClick from certain elements
Ah ...
forgot the ''return'' to leave the function ...
// my suggest:
var activator = Event.element(ev);
if (activator.hasClassName(''ignore'')){
Event.stop(ev);
// alert("event stopped");
return false;
}
// end
hope that helps
Bastian
On Wed, May 21, 2008 at 3:41 PM, Bastian Feder
<bastian.feder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hey!
>
> my first guess is to find the element who is causing the event and
> then stopping it.
> I mean something like:
>
> --- snip ---
> confirmExit : function(ev) {
>
> // my suggest:
>
> var activator = Event.element(ev);
> if (activator.hasClassName(''ignore'')){
> Event.stop(ev);
> // alert("event stopped");
> }
> // end
>
> // Serialize the form contents again
> this.newcontents = this.form.serialize();
>
> // Compare latest form contents with original form contents
> // to see if anything has changed.
> if ((this.formcontents != this.newcontents) &&
> ! (this.submitted)) {
>
> ev.returnValue = ''You have unsaved modifications to
the
> form data. If you leave without clicking the Save button, your changes
> will be lost.'';
> // return Event.stop(ev);
> }
>
> --- snip ---
>
> I did not test this since I currently have no time for deeper
> investigation, but I hope this helps.
>
> hf
> Bastian
>
>
>
>
> On Wed, May 21, 2008 at 3:20 PM, Mike P
<mpuglin-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote:
>>
>> Hi,
>>
>> I am new to Prototype and could use some assistance. I am using
>> Prototype 1.6.0.1.
>>
>> Scenario:
>>
>> I have the following JS script elements included in the HEAD section
>> of every page. This effectively creates an auto-confirm functionally
>> when a user attempts to leave a modified form. Any form not decorated
>> with the "ignoreForm" CSS class, will first prompt the user
to confirm
>> they want to exit without saving.
>>
>>
>> <!-- Create class which will allow forms to monitor themselves for
>> changes -->
>> <script type="text/javascript">
>>
>> var FormWatch = Class.create();
>>
>> FormWatch.prototype = {
>> initialize : function(form, options) {
>> this.submitted = false;
>>
>> this.form = $(form);
>>
>> // Let''s serialize this.form and store it...
>> // This will store the "original" state of the
form
>> this.formcontents = $(form).serialize();
>>
>> // On submit, we let the user changes pass thru without
>> prompting
>> Event.observe(this.form, ''submit'',
function()
>> {this.submitted >> true; }.bind(this));
>>
>> // On beforeunload event, we check for changes using our
>> confirmExit
>> // method and prompt user to confirm, if necessary
>> Event.observe(window, ''beforeunload'',
>> this.confirmExit.bind(this));
>> // Event.stop(ev);
>> },
>> confirmExit : function(ev) {
>> // Serialize the form contents again
>> this.newcontents = this.form.serialize();
>>
>> // Compare latest form contents with original form
>> contents
>> // to see if anything has changed.
>> if ((this.formcontents != this.newcontents) && !
>> (this.submitted)) {
>>
>> ev.returnValue = ''You have unsaved modifications
to the
>> form data. If you leave without clicking the Save button, your changes
>> will be lost.'';
>> // return Event.stop(ev);
>> }
>> }
>> }
>>
>>
>> </script>
>>
>> <script type="text/javascript">
>> // Utilizes Prototype JS lib
>> // On window load, loop thru forms on page which should not be
>> ignored.
>> // Register these forms with our modification listener so we can
>> prompt
>> // user to save changes. (see listener above)
>>
>> Event.observe(window, ''load'', function() {
>>
>> // Get all forms on page
>> var formArray =
$A($(document.getElementsByTagName(''form'')));
>>
>> // Loop thru forms, register any forms which do NOT have the
>> CSS
>> // class "ignoreForm"
>> formArray.each(function(aForm) {
>>
>> if (!($(aForm).hasClassName(''ignoreForm''))) {
>> new FormWatch(aForm);
>> }
>>
>> });
>>
>> // Get all elements with a ignoreClick
>> var linkArray = $A($(document.getElementsBy))
>>
>> });
>>
>>
>> </script>
>>
>>
>>
>> The above code works fine.
>>
>> I need to incorporate the ability to selectively disable the
>> beforeUnload logic based on the CSS class of the element which
>> triggered the onPageUnload. In other words, I want the ability to
>> apply a CSS class of "ignore" to an <A> or
<INPUT> element and have
>> the beforeUnload logic be ignored. This way, if I have a link which
>> opens a popup or something similar, I do NOT prompt the user whether
>> they want to save the form. The form processing would proceed as
>> usual. I don''t care how this is done, I played around with
Event
>> listeners using CSS selectors and also thought about wrapping events,
>> but could not figure this out.
>>
>> Any help would be appreciated.
>>
>>
>>
>> >>
>>
>
>
>
> --
> --
> spread the word ... see www.browsehappy.com ;o)
>
> Calvin: Weekends don''t count unless you spend them doing something
> completely pointless.
>
> Join the Greater IBM Connection
(http://www.xing.com/premiumgroup-6291.d26b7d)
>
--
--
spread the word ... see www.browsehappy.com ;o)
Calvin: Weekends don''t count unless you spend them doing something
completely pointless.
Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d)
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Oops: The following lines should not have been included in the
javascript above:
// Get all elements with a ignoreClick
var linkArray = $A($(document.getElementsBy))
On May 21, 9:20 am, Mike P
<mpug...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org>
wrote:> Hi,
>
> I am new to Prototype and could use some assistance. I am using
> Prototype 1.6.0.1.
>
> Scenario:
>
> I have the following JS script elements included in the HEAD section
> of every page. This effectively creates an auto-confirm functionally
> when a user attempts to leave a modified form. Any form not decorated
> with the "ignoreForm" CSS class, will first prompt the user to
confirm
> they want to exit without saving.
>
> <!-- Create class which will allow forms to monitor themselves for
> changes -->
> <script type="text/javascript">
>
> var FormWatch = Class.create();
>
> FormWatch.prototype = {
> initialize : function(form, options) {
> this.submitted = false;
>
> this.form = $(form);
>
> // Let''s serialize this.form and store it...
> // This will store the "original" state of the form
> this.formcontents = $(form).serialize();
>
> // On submit, we let the user changes pass thru without
> prompting
> Event.observe(this.form, ''submit'', function()
> {this.submitted > true; }.bind(this));
>
> // On beforeunload event, we check for changes using our
> confirmExit
> // method and prompt user to confirm, if necessary
> Event.observe(window, ''beforeunload'',
> this.confirmExit.bind(this));
> // Event.stop(ev);
> },
> confirmExit : function(ev) {
> // Serialize the form contents again
> this.newcontents = this.form.serialize();
>
> // Compare latest form contents with original form
> contents
> // to see if anything has changed.
> if ((this.formcontents != this.newcontents) && !
> (this.submitted)) {
>
> ev.returnValue = ''You have unsaved modifications to
the
> form data. If you leave without clicking the Save button, your changes
> will be lost.'';
> // return Event.stop(ev);
> }
> }
>
> }
>
> </script>
>
> <script type="text/javascript">
> // Utilizes Prototype JS lib
> // On window load, loop thru forms on page which should not be
> ignored.
> // Register these forms with our modification listener so we can
> prompt
> // user to save changes. (see listener above)
>
> Event.observe(window, ''load'', function() {
>
> // Get all forms on page
> var formArray =
$A($(document.getElementsByTagName(''form'')));
>
> // Loop thru forms, register any forms which do NOT have the
> CSS
> // class "ignoreForm"
> formArray.each(function(aForm) {
>
> if (!($(aForm).hasClassName(''ignoreForm''))) {
> new FormWatch(aForm);
> }
>
> });
>
> // Get all elements with a ignoreClick
> var linkArray = $A($(document.getElementsBy))
>
> });
>
> </script>
>
> The above code works fine.
>
> I need to incorporate the ability to selectively disable the
> beforeUnload logic based on the CSS class of the element which
> triggered the onPageUnload. In other words, I want the ability to
> apply a CSS class of "ignore" to an <A> or <INPUT>
element and have
> the beforeUnload logic be ignored. This way, if I have a link which
> opens a popup or something similar, I do NOT prompt the user whether
> they want to save the form. The form processing would proceed as
> usual. I don''t care how this is done, I played around with Event
> listeners using CSS selectors and also thought about wrapping events,
> but could not figure this out.
>
> Any help would be appreciated.
--~--~---------~--~----~------------~-------~--~----~
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 the reply. The problem with the approach you mention is that the "activator" variable at that point is bound to the document and not the element which triggered the unload event. I could be missing something because I am new to this. But, whilst looking at the JS using FireBug, activator variable is equal to #document. Is there some way to determine which element triggered this event...? thanks again On May 21, 9:43 am, "Bastian Feder" <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Ah ... > > forgot the ''return'' to leave the function ... > > // my suggest: > > var activator = Event.element(ev); > if (activator.hasClassName(''ignore'')){ > Event.stop(ev); > // alert("event stopped"); > > return false;} > > // end > > hope that helps > > Bastian > > > > On Wed, May 21, 2008 at 3:41 PM, Bastian Feder <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > Hey! > > > my first guess is to find the element who is causing the event and > > then stopping it. > > I mean something like: > > > --- snip --- > > confirmExit : function(ev) { > > > // my suggest: > > > var activator = Event.element(ev); > > if (activator.hasClassName(''ignore'')){ > > Event.stop(ev); > > // alert("event stopped"); > > } > > // end > > > // Serialize the form contents again > > this.newcontents = this.form.serialize(); > > > // Compare latest form contents with original form contents > > // to see if anything has changed. > > if ((this.formcontents != this.newcontents) && > > ! (this.submitted)) { > > > ev.returnValue = ''You have unsaved modifications to the > > form data. If you leave without clicking the Save button, your changes > > will be lost.''; > > // return Event.stop(ev); > > } > > > --- snip --- > > > I did not test this since I currently have no time for deeper > > investigation, but I hope this helps. > > > hf > > Bastian > > > On Wed, May 21, 2008 at 3:20 PM, Mike P <mpug...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote: > > >> Hi, > > >> I am new to Prototype and could use some assistance. I am using > >> Prototype 1.6.0.1. > > >> Scenario: > > >> I have the following JS script elements included in the HEAD section > >> of every page. This effectively creates an auto-confirm functionally > >> when a user attempts to leave a modified form. Any form not decorated > >> with the "ignoreForm" CSS class, will first prompt the user to confirm > >> they want to exit without saving. > > >> <!-- Create class which will allow forms to monitor themselves for > >> changes --> > >> <script type="text/javascript"> > > >> var FormWatch = Class.create(); > > >> FormWatch.prototype = { > >> initialize : function(form, options) { > >> this.submitted = false; > > >> this.form = $(form); > > >> // Let''s serialize this.form and store it... > >> // This will store the "original" state of the form > >> this.formcontents = $(form).serialize(); > > >> // On submit, we let the user changes pass thru without > >> prompting > >> Event.observe(this.form, ''submit'', function() > >> {this.submitted > >> true; }.bind(this)); > > >> // On beforeunload event, we check for changes using our > >> confirmExit > >> // method and prompt user to confirm, if necessary > >> Event.observe(window, ''beforeunload'', > >> this.confirmExit.bind(this)); > >> // Event.stop(ev); > >> }, > >> confirmExit : function(ev) { > >> // Serialize the form contents again > >> this.newcontents = this.form.serialize(); > > >> // Compare latest form contents with original form > >> contents > >> // to see if anything has changed. > >> if ((this.formcontents != this.newcontents) && ! > >> (this.submitted)) { > > >> ev.returnValue = ''You have unsaved modifications to the > >> form data. If you leave without clicking the Save button, your changes > >> will be lost.''; > >> // return Event.stop(ev); > >> } > >> } > >> } > > >> </script> > > >> <script type="text/javascript"> > >> // Utilizes Prototype JS lib > >> // On window load, loop thru forms on page which should not be > >> ignored. > >> // Register these forms with our modification listener so we can > >> prompt > >> // user to save changes. (see listener above) > > >> Event.observe(window, ''load'', function() { > > >> // Get all forms on page > >> var formArray = $A($(document.getElementsByTagName(''form''))); > > >> // Loop thru forms, register any forms which do NOT have the > >> CSS > >> // class "ignoreForm" > >> formArray.each(function(aForm) { > > >> if (!($(aForm).hasClassName(''ignoreForm''))) { > >> new FormWatch(aForm); > >> } > > >> }); > > >> // Get all elements with a ignoreClick > >> var linkArray = $A($(document.getElementsBy)) > > >> }); > > >> </script> > > >> The above code works fine. > > >> I need to incorporate the ability to selectively disable the > >> beforeUnload logic based on the CSS class of the element which > >> triggered the onPageUnload. In other words, I want the ability to > >> apply a CSS class of "ignore" to an <A> or <INPUT> element and have > >> the beforeUnload logic be ignored. This way, if I have a link which > >> opens a popup or something similar, I do NOT prompt the user whether > >> they want to save the form. The form processing would proceed as > >> usual. I don''t care how this is done, I played around with Event > >> listeners using CSS selectors and also thought about wrapping events, > >> but could not figure this out. > > >> Any help would be appreciated. > > > -- > > -- > > spread the word ... seewww.browsehappy.com;o) > > > Calvin: Weekends don''t count unless you spend them doing something > > completely pointless. > > > Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) > > -- > -- > spread the word ... seewww.browsehappy.com;o) > > Calvin: Weekends don''t count unless you spend them doing something > completely pointless. > > Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d)--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Bastian Feder
2008-May-21 14:09 UTC
Re: Prototype: How to ignore onClick from certain elements
mmh ... that''s strange .. As http://prototypejs.org/api/event/element shows it should return the element triggering the event .. or am I bad at rerading ?! Eventually the findElement ( http://prototypejs.org/api/event/findElement) will help instead .. hf Bastian On Wed, May 21, 2008 at 4:00 PM, Mike P <mpuglin-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote:> > Thanks for the reply. > > The problem with the approach you mention is that the "activator" > variable at that point is bound to the document and not the element > which triggered the unload event. > > I could be missing something because I am new to this. But, whilst > looking at the JS using FireBug, activator variable is equal to > #document. > > Is there some way to determine which element triggered this event...? > > > thanks again > > On May 21, 9:43 am, "Bastian Feder" <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> Ah ... >> >> forgot the ''return'' to leave the function ... >> >> // my suggest: >> >> var activator = Event.element(ev); >> if (activator.hasClassName(''ignore'')){ >> Event.stop(ev); >> // alert("event stopped"); >> >> return false;} >> >> // end >> >> hope that helps >> >> Bastian >> >> >> >> On Wed, May 21, 2008 at 3:41 PM, Bastian Feder <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> > Hey! >> >> > my first guess is to find the element who is causing the event and >> > then stopping it. >> > I mean something like: >> >> > --- snip --- >> > confirmExit : function(ev) { >> >> > // my suggest: >> >> > var activator = Event.element(ev); >> > if (activator.hasClassName(''ignore'')){ >> > Event.stop(ev); >> > // alert("event stopped"); >> > } >> > // end >> >> > // Serialize the form contents again >> > this.newcontents = this.form.serialize(); >> >> > // Compare latest form contents with original form contents >> > // to see if anything has changed. >> > if ((this.formcontents != this.newcontents) && >> > ! (this.submitted)) { >> >> > ev.returnValue = ''You have unsaved modifications to the >> > form data. If you leave without clicking the Save button, your changes >> > will be lost.''; >> > // return Event.stop(ev); >> > } >> >> > --- snip --- >> >> > I did not test this since I currently have no time for deeper >> > investigation, but I hope this helps. >> >> > hf >> > Bastian >> >> > On Wed, May 21, 2008 at 3:20 PM, Mike P <mpug...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote: >> >> >> Hi, >> >> >> I am new to Prototype and could use some assistance. I am using >> >> Prototype 1.6.0.1. >> >> >> Scenario: >> >> >> I have the following JS script elements included in the HEAD section >> >> of every page. This effectively creates an auto-confirm functionally >> >> when a user attempts to leave a modified form. Any form not decorated >> >> with the "ignoreForm" CSS class, will first prompt the user to confirm >> >> they want to exit without saving. >> >> >> <!-- Create class which will allow forms to monitor themselves for >> >> changes --> >> >> <script type="text/javascript"> >> >> >> var FormWatch = Class.create(); >> >> >> FormWatch.prototype = { >> >> initialize : function(form, options) { >> >> this.submitted = false; >> >> >> this.form = $(form); >> >> >> // Let''s serialize this.form and store it... >> >> // This will store the "original" state of the form >> >> this.formcontents = $(form).serialize(); >> >> >> // On submit, we let the user changes pass thru without >> >> prompting >> >> Event.observe(this.form, ''submit'', function() >> >> {this.submitted >> >> true; }.bind(this)); >> >> >> // On beforeunload event, we check for changes using our >> >> confirmExit >> >> // method and prompt user to confirm, if necessary >> >> Event.observe(window, ''beforeunload'', >> >> this.confirmExit.bind(this)); >> >> // Event.stop(ev); >> >> }, >> >> confirmExit : function(ev) { >> >> // Serialize the form contents again >> >> this.newcontents = this.form.serialize(); >> >> >> // Compare latest form contents with original form >> >> contents >> >> // to see if anything has changed. >> >> if ((this.formcontents != this.newcontents) && ! >> >> (this.submitted)) { >> >> >> ev.returnValue = ''You have unsaved modifications to the >> >> form data. If you leave without clicking the Save button, your changes >> >> will be lost.''; >> >> // return Event.stop(ev); >> >> } >> >> } >> >> } >> >> >> </script> >> >> >> <script type="text/javascript"> >> >> // Utilizes Prototype JS lib >> >> // On window load, loop thru forms on page which should not be >> >> ignored. >> >> // Register these forms with our modification listener so we can >> >> prompt >> >> // user to save changes. (see listener above) >> >> >> Event.observe(window, ''load'', function() { >> >> >> // Get all forms on page >> >> var formArray = $A($(document.getElementsByTagName(''form''))); >> >> >> // Loop thru forms, register any forms which do NOT have the >> >> CSS >> >> // class "ignoreForm" >> >> formArray.each(function(aForm) { >> >> >> if (!($(aForm).hasClassName(''ignoreForm''))) { >> >> new FormWatch(aForm); >> >> } >> >> >> }); >> >> >> // Get all elements with a ignoreClick >> >> var linkArray = $A($(document.getElementsBy)) >> >> >> }); >> >> >> </script> >> >> >> The above code works fine. >> >> >> I need to incorporate the ability to selectively disable the >> >> beforeUnload logic based on the CSS class of the element which >> >> triggered the onPageUnload. In other words, I want the ability to >> >> apply a CSS class of "ignore" to an <A> or <INPUT> element and have >> >> the beforeUnload logic be ignored. This way, if I have a link which >> >> opens a popup or something similar, I do NOT prompt the user whether >> >> they want to save the form. The form processing would proceed as >> >> usual. I don''t care how this is done, I played around with Event >> >> listeners using CSS selectors and also thought about wrapping events, >> >> but could not figure this out. >> >> >> Any help would be appreciated. >> >> > -- >> > -- >> > spread the word ... seewww.browsehappy.com;o) >> >> > Calvin: Weekends don''t count unless you spend them doing something >> > completely pointless. >> >> > Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) >> >> -- >> -- >> spread the word ... seewww.browsehappy.com;o) >> >> Calvin: Weekends don''t count unless you spend them doing something >> completely pointless. >> >> Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) > > >-- -- spread the word ... see www.browsehappy.com ;o) Calvin: Weekends don''t count unless you spend them doing something completely pointless. Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Actually the Event.element will return the DOM element on which the event occurs. So, in this case it seems, that within the beforeUnload function, the event "beforeUnload" is tied to the document. I am not sure how to determine which element triggered the whole chain of events (the click on the <a> element) However, thanks for your input On May 21, 10:09 am, "Bastian Feder" <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> mmh ... that''s strange .. > Ashttp://prototypejs.org/api/event/elementshows it should return the > element triggering the event .. or am I bad at rerading ?! > > Eventually the findElement (http://prototypejs.org/api/event/findElement) will help instead .. > > hf > Bastian > > > > On Wed, May 21, 2008 at 4:00 PM, Mike P <mpug...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote: > > > Thanks for the reply. > > > The problem with the approach you mention is that the "activator" > > variable at that point is bound to the document and not the element > > which triggered the unload event. > > > I could be missing something because I am new to this. But, whilst > > looking at the JS using FireBug, activator variable is equal to > > #document. > > > Is there some way to determine which element triggered this event...? > > > thanks again > > > On May 21, 9:43 am, "Bastian Feder" <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > >> Ah ... > > >> forgot the ''return'' to leave the function ... > > >> // my suggest: > > >> var activator = Event.element(ev); > >> if (activator.hasClassName(''ignore'')){ > >> Event.stop(ev); > >> // alert("event stopped"); > > >> return false;} > > >> // end > > >> hope that helps > > >> Bastian > > >> On Wed, May 21, 2008 at 3:41 PM, Bastian Feder <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > >> > Hey! > > >> > my first guess is to find the element who is causing the event and > >> > then stopping it. > >> > I mean something like: > > >> > --- snip --- > >> > confirmExit : function(ev) { > > >> > // my suggest: > > >> > var activator = Event.element(ev); > >> > if (activator.hasClassName(''ignore'')){ > >> > Event.stop(ev); > >> > // alert("event stopped"); > >> > } > >> > // end > > >> > // Serialize the form contents again > >> > this.newcontents = this.form.serialize(); > > >> > // Compare latest form contents with original form contents > >> > // to see if anything has changed. > >> > if ((this.formcontents != this.newcontents) && > >> > ! (this.submitted)) { > > >> > ev.returnValue = ''You have unsaved modifications to the > >> > form data. If you leave without clicking the Save button, your changes > >> > will be lost.''; > >> > // return Event.stop(ev); > >> > } > > >> > --- snip --- > > >> > I did not test this since I currently have no time for deeper > >> > investigation, but I hope this helps. > > >> > hf > >> > Bastian > > >> > On Wed, May 21, 2008 at 3:20 PM, Mike P <mpug...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote: > > >> >> Hi, > > >> >> I am new to Prototype and could use some assistance. I am using > >> >> Prototype 1.6.0.1. > > >> >> Scenario: > > >> >> I have the following JS script elements included in the HEAD section > >> >> of every page. This effectively creates an auto-confirm functionally > >> >> when a user attempts to leave a modified form. Any form not decorated > >> >> with the "ignoreForm" CSS class, will first prompt the user to confirm > >> >> they want to exit without saving. > > >> >> <!-- Create class which will allow forms to monitor themselves for > >> >> changes --> > >> >> <script type="text/javascript"> > > >> >> var FormWatch = Class.create(); > > >> >> FormWatch.prototype = { > >> >> initialize : function(form, options) { > >> >> this.submitted = false; > > >> >> this.form = $(form); > > >> >> // Let''s serialize this.form and store it... > >> >> // This will store the "original" state of the form > >> >> this.formcontents = $(form).serialize(); > > >> >> // On submit, we let the user changes pass thru without > >> >> prompting > >> >> Event.observe(this.form, ''submit'', function() > >> >> {this.submitted > >> >> true; }.bind(this)); > > >> >> // On beforeunload event, we check for changes using our > >> >> confirmExit > >> >> // method and prompt user to confirm, if necessary > >> >> Event.observe(window, ''beforeunload'', > >> >> this.confirmExit.bind(this)); > >> >> // Event.stop(ev); > >> >> }, > >> >> confirmExit : function(ev) { > >> >> // Serialize the form contents again > >> >> this.newcontents = this.form.serialize(); > > >> >> // Compare latest form contents with original form > >> >> contents > >> >> // to see if anything has changed. > >> >> if ((this.formcontents != this.newcontents) && ! > >> >> (this.submitted)) { > > >> >> ev.returnValue = ''You have unsaved modifications to the > >> >> form data. If you leave without clicking the Save button, your changes > >> >> will be lost.''; > >> >> // return Event.stop(ev); > >> >> } > >> >> } > >> >> } > > >> >> </script> > > >> >> <script type="text/javascript"> > >> >> // Utilizes Prototype JS lib > >> >> // On window load, loop thru forms on page which should not be > >> >> ignored. > >> >> // Register these forms with our modification listener so we can > >> >> prompt > >> >> // user to save changes. (see listener above) > > >> >> Event.observe(window, ''load'', function() { > > >> >> // Get all forms on page > >> >> var formArray = $A($(document.getElementsByTagName(''form''))); > > >> >> // Loop thru forms, register any forms which do NOT have the > >> >> CSS > >> >> // class "ignoreForm" > >> >> formArray.each(function(aForm) { > > >> >> if (!($(aForm).hasClassName(''ignoreForm''))) { > >> >> new FormWatch(aForm); > >> >> } > > >> >> }); > > >> >> // Get all elements with a ignoreClick > >> >> var linkArray = $A($(document.getElementsBy)) > > >> >> }); > > >> >> </script> > > >> >> The above code works fine. > > >> >> I need to incorporate the ability to selectively disable the > >> >> beforeUnload logic based on the CSS class of the element which > >> >> triggered the onPageUnload. In other words, I want the ability to > >> >> apply a CSS class of "ignore" to an <A> or <INPUT> element and have > >> >> the beforeUnload logic be ignored. This way, if I have a link which > >> >> opens a popup or something similar, I do NOT prompt the user whether > >> >> they want to save the form. The form processing would proceed as > >> >> usual. I don''t care how this is done, I played around with Event > >> >> listeners using CSS selectors and also thought about wrapping events, > >> >> but could not figure this out. > > >> >> Any help would be appreciated. > > >> > -- > >> > -- > >> > spread the word ... seewww.browsehappy.com;o) > > >> > Calvin: Weekends don''t count unless you spend them doing something > >> > completely pointless. > > >> > Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) > > >> -- > >> -- > >> spread the word ... seewww.browsehappy.com;o) > > >> Calvin: Weekends don''t count unless you spend them doing something > >> completely pointless. > > >> Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) > > -- > -- > spread the word ... seewww.browsehappy.com;o) > > Calvin: Weekends don''t count unless you spend them doing something > completely pointless. > > Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d)--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Bastian Feder
2008-May-21 14:37 UTC
Re: Prototype: How to ignore onClick from certain elements
another idea ... why not using another event, let''s say onmouseover and onmouseout to deactivate/activate the observer for the form? In this case you might be save clicking a button which shall not trigger the beforeunload event. as I said .. it''s just an idea .. hf Bastian On Wed, May 21, 2008 at 4:17 PM, Mike P <mpuglin-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote:> > Actually the Event.element will return the DOM element on which the > event occurs. So, in this case it seems, that within the beforeUnload > function, the event "beforeUnload" is tied to the document. I am not > sure how to determine which element triggered the whole chain of > events (the click on the <a> element) > > However, thanks for your input > > On May 21, 10:09 am, "Bastian Feder" <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> mmh ... that''s strange .. >> Ashttp://prototypejs.org/api/event/elementshows it should return the >> element triggering the event .. or am I bad at rerading ?! >> >> Eventually the findElement (http://prototypejs.org/api/event/findElement) will help instead .. >> >> hf >> Bastian >> >> >> >> On Wed, May 21, 2008 at 4:00 PM, Mike P <mpug...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote: >> >> > Thanks for the reply. >> >> > The problem with the approach you mention is that the "activator" >> > variable at that point is bound to the document and not the element >> > which triggered the unload event. >> >> > I could be missing something because I am new to this. But, whilst >> > looking at the JS using FireBug, activator variable is equal to >> > #document. >> >> > Is there some way to determine which element triggered this event...? >> >> > thanks again >> >> > On May 21, 9:43 am, "Bastian Feder" <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> >> Ah ... >> >> >> forgot the ''return'' to leave the function ... >> >> >> // my suggest: >> >> >> var activator = Event.element(ev); >> >> if (activator.hasClassName(''ignore'')){ >> >> Event.stop(ev); >> >> // alert("event stopped"); >> >> >> return false;} >> >> >> // end >> >> >> hope that helps >> >> >> Bastian >> >> >> On Wed, May 21, 2008 at 3:41 PM, Bastian Feder <bastian.fe...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> >> > Hey! >> >> >> > my first guess is to find the element who is causing the event and >> >> > then stopping it. >> >> > I mean something like: >> >> >> > --- snip --- >> >> > confirmExit : function(ev) { >> >> >> > // my suggest: >> >> >> > var activator = Event.element(ev); >> >> > if (activator.hasClassName(''ignore'')){ >> >> > Event.stop(ev); >> >> > // alert("event stopped"); >> >> > } >> >> > // end >> >> >> > // Serialize the form contents again >> >> > this.newcontents = this.form.serialize(); >> >> >> > // Compare latest form contents with original form contents >> >> > // to see if anything has changed. >> >> > if ((this.formcontents != this.newcontents) && >> >> > ! (this.submitted)) { >> >> >> > ev.returnValue = ''You have unsaved modifications to the >> >> > form data. If you leave without clicking the Save button, your changes >> >> > will be lost.''; >> >> > // return Event.stop(ev); >> >> > } >> >> >> > --- snip --- >> >> >> > I did not test this since I currently have no time for deeper >> >> > investigation, but I hope this helps. >> >> >> > hf >> >> > Bastian >> >> >> > On Wed, May 21, 2008 at 3:20 PM, Mike P <mpug...-/E1597aS9LQAvxtiuMwx3w@public.gmane.org> wrote: >> >> >> >> Hi, >> >> >> >> I am new to Prototype and could use some assistance. I am using >> >> >> Prototype 1.6.0.1. >> >> >> >> Scenario: >> >> >> >> I have the following JS script elements included in the HEAD section >> >> >> of every page. This effectively creates an auto-confirm functionally >> >> >> when a user attempts to leave a modified form. Any form not decorated >> >> >> with the "ignoreForm" CSS class, will first prompt the user to confirm >> >> >> they want to exit without saving. >> >> >> >> <!-- Create class which will allow forms to monitor themselves for >> >> >> changes --> >> >> >> <script type="text/javascript"> >> >> >> >> var FormWatch = Class.create(); >> >> >> >> FormWatch.prototype = { >> >> >> initialize : function(form, options) { >> >> >> this.submitted = false; >> >> >> >> this.form = $(form); >> >> >> >> // Let''s serialize this.form and store it... >> >> >> // This will store the "original" state of the form >> >> >> this.formcontents = $(form).serialize(); >> >> >> >> // On submit, we let the user changes pass thru without >> >> >> prompting >> >> >> Event.observe(this.form, ''submit'', function() >> >> >> {this.submitted >> >> >> true; }.bind(this)); >> >> >> >> // On beforeunload event, we check for changes using our >> >> >> confirmExit >> >> >> // method and prompt user to confirm, if necessary >> >> >> Event.observe(window, ''beforeunload'', >> >> >> this.confirmExit.bind(this)); >> >> >> // Event.stop(ev); >> >> >> }, >> >> >> confirmExit : function(ev) { >> >> >> // Serialize the form contents again >> >> >> this.newcontents = this.form.serialize(); >> >> >> >> // Compare latest form contents with original form >> >> >> contents >> >> >> // to see if anything has changed. >> >> >> if ((this.formcontents != this.newcontents) && ! >> >> >> (this.submitted)) { >> >> >> >> ev.returnValue = ''You have unsaved modifications to the >> >> >> form data. If you leave without clicking the Save button, your changes >> >> >> will be lost.''; >> >> >> // return Event.stop(ev); >> >> >> } >> >> >> } >> >> >> } >> >> >> >> </script> >> >> >> >> <script type="text/javascript"> >> >> >> // Utilizes Prototype JS lib >> >> >> // On window load, loop thru forms on page which should not be >> >> >> ignored. >> >> >> // Register these forms with our modification listener so we can >> >> >> prompt >> >> >> // user to save changes. (see listener above) >> >> >> >> Event.observe(window, ''load'', function() { >> >> >> >> // Get all forms on page >> >> >> var formArray = $A($(document.getElementsByTagName(''form''))); >> >> >> >> // Loop thru forms, register any forms which do NOT have the >> >> >> CSS >> >> >> // class "ignoreForm" >> >> >> formArray.each(function(aForm) { >> >> >> >> if (!($(aForm).hasClassName(''ignoreForm''))) { >> >> >> new FormWatch(aForm); >> >> >> } >> >> >> >> }); >> >> >> >> // Get all elements with a ignoreClick >> >> >> var linkArray = $A($(document.getElementsBy)) >> >> >> >> }); >> >> >> >> </script> >> >> >> >> The above code works fine. >> >> >> >> I need to incorporate the ability to selectively disable the >> >> >> beforeUnload logic based on the CSS class of the element which >> >> >> triggered the onPageUnload. In other words, I want the ability to >> >> >> apply a CSS class of "ignore" to an <A> or <INPUT> element and have >> >> >> the beforeUnload logic be ignored. This way, if I have a link which >> >> >> opens a popup or something similar, I do NOT prompt the user whether >> >> >> they want to save the form. The form processing would proceed as >> >> >> usual. I don''t care how this is done, I played around with Event >> >> >> listeners using CSS selectors and also thought about wrapping events, >> >> >> but could not figure this out. >> >> >> >> Any help would be appreciated. >> >> >> > -- >> >> > -- >> >> > spread the word ... seewww.browsehappy.com;o) >> >> >> > Calvin: Weekends don''t count unless you spend them doing something >> >> > completely pointless. >> >> >> > Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) >> >> >> -- >> >> -- >> >> spread the word ... seewww.browsehappy.com;o) >> >> >> Calvin: Weekends don''t count unless you spend them doing something >> >> completely pointless. >> >> >> Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) >> >> -- >> -- >> spread the word ... seewww.browsehappy.com;o) >> >> Calvin: Weekends don''t count unless you spend them doing something >> completely pointless. >> >> Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) > > >-- -- spread the word ... see www.browsehappy.com ;o) Calvin: Weekends don''t count unless you spend them doing something completely pointless. Join the Greater IBM Connection (http://www.xing.com/premiumgroup-6291.d26b7d) --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---