Páginas

miércoles, 12 de enero de 2011

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>

No hay comentarios:

Publicar un comentario