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++:: Zope and ajax/ahah part 4: jquery
Posted at 03.Aug,2007 16:17  Comments 1 / Trackbacks 0 / Like this post!
Technorati tag(s):

Been a while since I got back to things ajaxy. Got some time to spare, and followed thru on my other ajax/ahah demos

Got to know about jquery from Aizatto. Props to him and his haze.net

Anywho, everything is about the same with jquery. I think jquery approached the problems differently compared to other javascript libraries.

Steps to get things working::

  • include the jquery.js library in our header. And since we're also going to deal with forms and modal pop-up, also include jquery.form.js and thickbox.js (or any of its derivative).:
          <script type="text/javascript"
                src="jquery.js"></script>
        <script type="text/javascript"
                src="thickbox.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script> 
    
  • now tell jquery when things are ready. include these in head too:
       $(document).ready(function(){ //* start
         ...
         });
    
  • fill in the necessary functions or jquery magic:
           //* our get time.  get the time from getDate (a script (Python))
    
          $("#gettime").click(function(){
               $.get("getDate",
                        function(data){
                                  $("#clock").fadeIn('slow').html(data);
                          }
                     );
         });
    
          //*call getInfo, which is a Script(Python) 
          //*that returns html - ahah - do the effects too.  neat
            $("#getInfo").click(function(){
               $.get("getInfo",
                        function(data){
                                  $("#infoId").slideDown('slow').html(data);
                          }
                     );
         });
    
         //our post form example + effects!
          $('#postform').ajaxForm({ 
            // target identifies the element(s) to update 
           //with the server response 
            target: '#theres', 
    
            // success identifies the function 
            //to invoke when the server response 
            // has been received; here we apply 
            //a fade-in effect to the new content 
            success: function() { 
                $('#theres').fadeIn('slow'); 
            } 
        }); 
    
  • for modal pop-up, it's all done by thickbox. include the stylesheet, and call it like so:
      <a href="ngku.html?height=400&width=400&modal=true" class="thickbox" title="the video">view video</a> 
    

Coolness. I guess I'll stick with jquery for all things ajax/ahah.

See all these in action


Bookmark and Share

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

Comments

test of AHAH with internal javascripts

jQuery http://fullajax.ru/temp/asyncjs/jquery3.png - load page ~ 36.7 second

Fullajax http://fullajax.ru/temp/asyncjs/flax3.png - load page ~ 3.5 second

Ruslan  at 16.Apr,2009 02:34
Post a comment