Problem:
I desired the following feature on my page. When the user clicked a link, do the following:
- Use scriptaculous animations to "get rid of" the current page (goal is to eliminate other links and form submit buttons and provide visual feedback that a 'process' has started).
- Display the dialog that was *already* coded into the link's onclick event.
- If they choose 'ok', give them visual feedback that the action has been submitted and then *continue* to the link destination.
- If they choose 'cancel', restore the page.
Solution: yourpage.jsp
Event.observe( window, 'load',
function() {
//alert('observing window load');
$$('.processRole').each(
function(value, index) {
var old = value.onclick;
value.onclick = function() {
new Effect.SlideUp('pagecontent', {
duration: 1.0,
queue: 'front'
});
new Effect.Fade('copyRight', {
duration: 1.0,
queue: 'end',
afterFinish: function(o) {
var rv = old.call(value);
if (rv) {
// alert('you chose ok');
new Effect.Appear('waitNotification', {
queue: 'end'
});
new Effect.Highlight('waitNotification', {
queue: 'end'
});
new Effect.Appear('copyRight', {
queue: 'end'
});
location.href = value;
} else {
//alert('you chose cancel');
new Effect.SlideDown('pagecontent', {
duration: 1.0,
queue: 'front'
});
return false; // this return doesn't have any effects currently
};
}
});
return false; // always return false
};
}
);
}
);
A slight improvement; do not begin the navigation until the last animation is finished:
snippet: yourpage.jsp
new Effect.Appear('copyRight', {
queue: 'end',
afterFinish: function(o) {
location.href = value;
}
});
//location.href = value;
