Random ...
 
December 2017
S M T W T F S
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Tags ...
Links



python+zope++:: Quickie: Ajax(y) visual effects with Scriptaculous + mini + zope
Posted at 29.Dec,2006 16:20  Comments 0 / Trackbacks 0 / Like this post!
Technorati tag(s):

It's been a while since I experimented with ajax and zope.

My last ajax experiment was with mini, getting results from the server.

However, the problem was that there's no visual indicator to tell the users that the contents have changed.

Enters Scriptaculous. It's a great library that makes producing visual effects a cinch, well to someone with limited javascript experience like myself.

It also can do other stuff too. But that's for later.

Here's what I did:

  • get scriptaculous and installed somewhere.
  • include it in the head:
          <script src="prototype.js" type="text/javascript"></script>
          <script src="scriptaculous.js" type="text/javascript"></script>
    
  • since we're going to use mini, include it too:
          <script src="ajax.js" type="text/javascript"></script>
    
  • define two functions to do the effect - appear and fade:
        <script type="text/javascript">
           function startProgress (elmid) {
              Effect.Appear(elmid,{duration:2.5});
              }
    
           function endProgress (elmid) {
             Effect.Fade(elmid,{duration:2.5});
              }
        </script>
    
  • now do the element where the changes are supposed to be. This example will show the busy image:
       <div>
          <span id="indicator" style="display:none;"><img    src="indicator.gif" border="0"></span>
          <span id="infoId">&nbsp;</span>
        </div>
    
  • or we can just highlight the element that's changed. This is straight scriptaculous:
        <form method="post"  onSubmit="ajax.submit('getAll','theres',this);new    Effect.Highlight('theres');return false">
        <br>name: <input type="text" name="username" value="your name">
        <br>age: <input type="text" name="age" value="3">
        <br><textarea name="comments">Your  comments?</textarea>
        <br><input type="submit">
        </form>
    
        <div id="theres">
    
        &nbsp;
        </div>
    

Here's the demo

The image loading progress indicator was derived from Bill Burcham's memeRocket


Bookmark and Share

Is this entry helpful? Comments/Donate/Click some google ads.  
Trackback is http://myzope.kedai.com.my/blogs/kedai/115/tbping 

Comments
Post a comment