Probably the simplest Ajax effect that I can think of that is desirable to add to web applications is to cause login boxes to “shake”, just like real computer login panels do, on a failed login. This is one of the few situations where a simple animation effect (too simple to qualify for Ajax, really) has a significant value. I’ve been doing this in projects for quite a while now.<\/p>\n
The first stage is to find and install some suitable javascripts to implement Ajax. A popular set is the Scriptaculous and Prototype libraries. First find and install them from: http:\/\/script.aculo.us\/. Take a look at the “effects engine” demo page to see what we are getting into.<\/p>\n
Assuming that you have a reasonably standard page set up, the process for adding this shake effect is simple. What is going to happen is that a script will execute when your page is loaded after the failed login attempt. For this, just drop a script onto the page with the content that will invoke the effect; it will execute on load.<\/p>\n
To make this happen, you need to make some minor changes to your java component for the page. Add the following few lines:<\/p>\n
Then you need to set this string appropriately when your login fails:<\/p>\n Time to update the component wo to activate the effect:<\/p>\n Add to the wod file:<\/p>\n And in the html file, you will want to add your Ajax libraries. In <head>\u00c2\u00a0insert:<\/p>\n The hardest part is going to be to isolate the part of the page that you want to shake. Luckily, most old login panels consist of a table in the middle of the page; add an extra attribute to the table: id =”loginbox”. If you don’t have a table for this, you can add a div with the id set, but not all html elements will shake.<\/p>\n Finally, add in anywhere in the body:<\/p>\n I normally add this at the end.<\/p>\n","protected":false},"excerpt":{"rendered":" Probably the simplest Ajax effect that I can think of that is desirable to add to web applications is to cause login boxes to “shake”, just like real computer login panels do, on a failed login. This is one of the few situations where a simple animation effect (too simple to qualify for Ajax, really) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[19,23,24,29,35,38],"class_list":["post-71","post","type-post","status-publish","format-standard","hentry","category-programming-for-apples","tag-html","tag-java","tag-javascript","tag-prototype","tag-scriptaculous","tag-webobjects"],"_links":{"self":[{"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=71"}],"version-history":[{"count":0,"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/71\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.paullynch.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}protected String onload;<\/code><\/p>\n <\/code><\/p>\npublic void awake() {
\nonload = \"\";
\n}<\/code><\/p>\nonload = \"new Effect.Shake(loginbox)\";<\/code><\/p>\nOnload: WOString {
\nvalue = onload;
\n}<\/code><\/p>\n<script src=\"\/javascripts\/prototype.js\" type=\"text\/javascript\"><\/script> <script src=\"\/javascripts\/scriptaculous.js\" type=\"text\/javascript\"><\/script><\/code><\/p>\n<script type=\"text\/javascript\"><!-- <webobjects name=\"Onload\"><\/webobjects> \/\/ --><\/script><\/code><\/p>\n