Web2py ejemplo ajax upload hecho por michele.comitini

Esta ejemplo permite a los usuarios (sin autenticación) asociar imágenes a los usuarios registrados (primero tenes que registrar algunos usuarios). La lista es actualizada sin recargar toda la página.

Referencia: http://www.web2pyslices.com/main/slices/take_slice/114

Primero crear dentro de la carpeta static/js el archivo ajaxupload.js

Despues descargar este plugin:
Copiar y pegar contenido del plugin en el archivo ajaxupload.js

en el modelo................

db.define_table('user_pictures',
                Field('user', db.auth_user, unique=True, represent=lambda id: '%s %s ' %( db.auth_user(id).first_name, db.auth_user(id).last_name)),
                Field('picture', 'upload', requires=IS_IMAGE()))
               
db.user_pictures.user.requires=IS_IN_DB(db,'auth_user.id', '%(first_name)s %(last_name)s', zero=T('Escoge uno'))


default.py.............................................

def index():
        return dict()
   
def user_picture_list():
    rows = db(db.user_pictures.id>0).select()
    return dict(rows=rows)

def user_picture_form():
    form = SQLFORM(db.user_pictures)
    if form.accepts(request.vars):
       response.flash='Thanks for filling the form'
       return XML('ajax("%s",[],"pic_list");' % URL('user_picture_list.load'))
    elif form.errors:
        response.flash='Fill the form correctly'
    else:
        response.flash='Please, fill the form'

    return dict(form=form)


en las vistas................................................


default/index.html
{{response.files.append(URL(r=request,c='static',f='js/ajaxupload.js'))}}
{{extend 'layout.html'}}

<div class='ez-wr'>

    <h2>Esta lista crecera a medida que se carguen las imágenes</h2>

  <div class='ez-box' id='pic_list'>
    {{=LOAD('default', 'user_picture_list.load', ajax=False)}}
  </div>
</div>
<div class='ez-wr'>
  <p>
    Cargue una nueva imagen  </p>
  <div class='ez-box'>
    {{=LOAD('default','user_picture_form.load', ajax=False)}}
  </div>
</div>

default/user_picture_form.load     //fijaos que la terminacion es (.load) no (.html) y tampoco se le pone {{extend 'layout.html'}}


{{=form}}
<script type='text/javascript'>
  //<!--
    jQuery('document').ready(function() {
        jQuery('form').ajaxForm({dataType: 'script',
                 url: "{{=URL('user_picture_form')}}"
                 });
});
                     //-->
</script>

default/user_picture_list.load    //fijaos que la terminacion es (.load) no (.html) y tampoco se le pone {{extend 'layout.html'}}


<div class='ez-wr'>
     {{for r in rows:}}
     <div class="ez-wr">
       <div class="ez-fl ez-negmr ez-50">
     {{user = db.auth_user(r.user)}}
     {{="%s %s" % (user.first_name,user.last_name)}}
       </div>
       <div class="ez-last ez-oh">
     {{=IMG(_src=URL(f='download',args=[r.picture]))}}
       </div>
     </div>
     {{pass}}
   </div>

Web2py ejemplo sobre selección dinámica y auto-completar.

En este ejemplo vamos a utilizar los ayudantes FORM, SELECT, OPTION etc... donde mostraremos de forma dinámica los meses en un combo-box, también haremos una búsqueda de esos mismo meses a medida que vamos escribiendo.

Más Información: http://www.latinuxpress.com/books/drafts/web2py/caps/capz10.html#auto-completar

default.py.....................................

def index():
    lista = ['Enero' , 'Febrero' , 'Marzo' , 'Abril' , 'Mayo' , 'Junio', 'Julio','Agosto' , 'Septiembre' , 'Octubre' , 'Noviembre' , 'Diciembre']

    form=FORM(LABEL('Selecione un mes: '),SELECT([OPTION(texto, _value=texto) for texto in lista],_name='combo'),BR(),LABEL('Escribir el nombre de un mes:'),INPUT(_name='month',_id='month'))

    return dict(lista=lista,form=form)

def month_selector():

    months = ['Enero' , 'Febrero' , 'Marzo' , 'Abril' , 'Mayo' , 'Junio' , 'Julio' , 'Agosto' , 'Septiembre' , 'Octubre' , 'Noviembre' , 'Diciembre']

    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='PaleGreen'",
                                 _onmouseout="this.style.backgroundColor='white'",
                                 _onmouseup="jQuery('.suggestions').hide()",
                                 ) for k in selected])

default/index.html.............................
{{extend 'layout.html'}}


<style>
#suggestions { position: relative; }
.suggestions { background: white;  }
.suggestions DIV { padding: 2px 4px 2px 4px; }
</style>

{{=form}}


<div id='suggestions'> </div>

<script>
jQuery("#month").keyup(function(){
      ajax('month_selector', ['month'], 'suggestions')});
</script>