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