web2py

<div class="one" id="a">Hello</div>
<div class="two" id="b">World</div>
<script>
jQuery(document).ready(function(){
   jQuery('.one').click(function(){jQuery('.two').slideToggle()});
</script>

The body of the unnamed function is executed only when the document is ready, after it has been fully loaded.

Here is a list of useful event names:

Form events

• onchange : Script to be run when the element changes
• onsubmit : Script to be run when the form is submitted
• onreset : Script to be run when the form is reset
• onselect : Script to be run when the element is selected
• onblur : Script to be run when the element loses focus
• onfocus : Script to be run when the element gets focus

Keyboard events

• onkeydown : Script to be run when key is pressed
• onkeypress : Script to be run when key is pressed and released
• onkeyup : Script to be run when key is released

Mouse events

• onclick : Script to be run on a mouse click
• ondblclick : Script to be run on a mouse double-click
• onmousedown : Script to be run when mouse button is pressed
• onmousemove : Script to be run when mouse pointer moves
• onmouseout : Script to be run when mouse pointer moves out of an element
• onmouseover : Script to be run when mouse pointer moves over an element
• onmouseup : Script to be run when mouse button is released

Here is a list of useful effects defined by jQuery:

Effects

• jQuery(...).show() : Makes the object visible
• jQuery(...).hide() : Makes the object hidden
• jQuery(...).slideToggle(speed, callback) : Makes the object slide up or down
• jQuery(...).slideUp(speed, callback) : Makes the object slide up
• jQuery(...).slideDown(speed, callback) : Makes the object slide down
• jQuery(...).fadeIn(speed, callback) : Makes the object fade in
• jQuery(...).fadeOut(speed, callback) : Makes the object fade out

The speed argument is usually "slow", "fast" or omitted (the default). The callback is an optional function that is called when the effect is completed.

jQuery effects can also easily be embedded in helpers, for example, in a view:

{{=DIV('click me!', _onclick="jQuery(this).fadeOut()")}}

db = DAL('sqlite://storage.sqlite')
db.define_table('taxpayer',
    Field('spouse_name'))

def index():
    form = SQLFORM(db.taxpayer)
    if form.process().accepted:
        response.flash = 'record inserted'
    return dict(form=form)

{{extend 'layout.html'}}
{{=form}}
<script>
jQuery(document).ready(function(){
   if(jQuery('#taxpayer_married').prop('checked'))
        jQuery('#taxpayer_spouse_name__row').show();
   else jQuery('#taxpayer_spouse_name__row').hide();
   jQuery('#taxpayer_married').change(function(){
        if(jQuery('#taxpayer_married').prop('checked'))
            jQuery('#taxpayer_spouse_name__row').show();
        else jQuery('#taxpayer_spouse_name__row').hide();});
</script>

def edit():
    row = db.taxpayer[request.args(0)]
    form = SQLFORM(db.taxpayer, row, deletable=True)
    if form.process().accepted:
        response.flash = 'record updated'
    return dict(form=form)

{{extend 'layout.html'}}
{{=form}}

jQuery(document).ready(function(){
   jQuery('input.delete').prop('onclick',
     'if(this.checked) if(!confirm(
        "{{=T('Sure you want to delete this object?')}}"))
      this.checked=False;');

ajax(url, [name1, name2, ...], target, options)

def one():
    return dict()
def echo():
    return request.vars.name

{{extend 'layout.html'}}
   <input name="name" onkeyup="ajax('{{=URL('default', 'echo')}}', ['name'], 'target')" />
</form>
<div id="target"></div>

def one():
    return dict()
def echo():
    return "jQuery('#target').html(%s);" % repr(request.vars.name)

{{extend 'layout.html'}}
   <input name="name" onkeyup="ajax('{{=URL('default', 'echo')}}', ['name'], ':eval')" />
</form>
<div id="target"></div>

def month_input():
    return dict()
def month_selector():
    if not request.vars.month: return ''
    months = ['January', 'February', 'March', 'April', 'May',
              'June', 'July', 'August', 'September' , 'October',
              'November', 'December']
    month_start = request.vars.month.capitalize()
    selected = [m for m in months if m.startswith(month_start)]
    return DIV(*[DIV(k,
                     _onclick="jQuery('#month').val('%s')" % k,
                     _onmouseover="this.style.backgroundColor='yellow'",
                     _onmouseout="this.style.backgroundColor='white'"
                     ) for k in selected])

{{extend 'layout.html'}}
<style>
#suggestions { position: relative; }
.suggestions { background: white; border: solid 1px #55A6C8; }
.suggestions DIV { padding: 2px 4px 2px 4px; }
</style>
 <input type="text" id="month" name="month" style="width: 250px" /><br />
 <div style="position: absolute;" id="suggestions"
      class="suggestions"></div>
</form>
<script>
jQuery("#month").keyup(function(){
      ajax('{{=URL('default', 'month_selector')}}', ['month'], 'suggestions')});
</script>

<div>
     <div onclick="jQuery('#month').val('March')"
          onmouseout="this.style.backgroundColor='white'"
          onmouseover="this.style.backgroundColor='yellow'">March</div>
     <div onclick="jQuery('#month').val('May')"
          onmouseout="this.style.backgroundColor='white'"
          onmouseover="this.style.backgroundColor='yellow'">May</div>
</div>

db.define_table('month', Field('name'))

def month_input():
    return dict()
def month_selector():
    if not request.vars.month:
        return ''
    pattern = request.vars.month.capitalize() + '%'
    selected = [row.name for row in db(db.month.name.like(pattern)).select()]
    return ''.join([DIV(k,
                 _onclick="jQuery('#month').val('%s')" % k,
                 _onmouseover="this.style.backgroundColor='yellow'",
                 _onmouseout="this.style.backgroundColor='white'"
                 ).xml() for k in selected])

db = DAL('sqlite://storage.sqlite')
db.define_table('post', Field('your_message', 'text'))
db.post.your_message.requires = IS_NOT_EMPTY()

def index():
    return dict()
def new_post():
    form = SQLFORM(db.post)
    if form.accepts(request, formname=None):
        return DIV("Message posted")
    elif form.errors:
        return TABLE(*[TR(k, v) for k, v in form.errors.items()])

{{extend 'layout.html'}}
<div id="target"></div>
<form id="myform">
  <input name="your_message" id="your_message" />
  <input type="submit" />
</form>
<script>
jQuery('#myform').submit(function() {
  ajax('{{=URL('new_post')}}',
       ['your_message'], 'target');
  return false;
</script>

db = DAL('sqlite://images.db')
db.define_table('item',
    Field('image', 'upload'),
    Field('votes', 'integer', default=0))

def list_items():
    items = db().select(db.item.ALL, orderby=db.item.votes)
    return dict(items=items)
def download():
    return response.download(request, db)
def vote():
    item = db.item[request.vars.id]
    new_votes = item.votes + 1
    item.update_record(votes=new_votes)
    return str(new_votes)

{{extend 'layout.html'}}
<form><input type="hidden" id="id" name="id" value="" /></form>
{{for item in items:}}
<img src="{{=URL('download', args=item.image)}}"
     width="200px" />
<br />
Votes=<span id="item{{=item.id}}">{{=item.votes}}</span>
[<span onclick="jQuery('#id').val('{{=item.id}}');
       ajax('{{=URL('default', 'vote')}}', ['id'], 'item{{=item.id}}');">vote up</span>]
{{pass}}