Web2py: creazione automatica di un form con SQLFORM – 2

Come detto nella prima parte di questo articolo, vogliamo scrivere una funzione di callback Ajax che, quando l’utente sceglie dal menu a tendina la categoria del prodotto, automaticamente vada a popolare il menu a tendina delle sottocategorie proprie di quella particolare categoria. Esistono molti modi per raggiungere lo scopo e web2py offre “chiavi in mano” una funzione ajax(), derivata da JQuery, che potrebbe essere utilizzata allo scopo. Ma supponiamo di volerci complicare la vita: alla scelta della categoria dal menu a tendina useremo l’oggetto jquery getJSON per chiamare la funzione “loadsubcat” che andremo a scrivere nel nostro controller default.py. La nostra funzione inoltre, restituirà i valori richiesti in formato JSON.

La nostra funzione loadsubcat sarà allora la seguente:

def loadsubcat():
    #importiamo il modulo simplejson
    import gluon.contrib.simplejson as js
    #leggiamo l'id della categoria
    idcat=request.vars.idcat
    #selezioniamo dal db tutte le sottocategorie relative alla categoria  
    rows_subcat=db(db.subcat.id_cat==idcat).select(db.subcat.ALL)
    prepariamo i dati per json
    data=[]
    for row in rows_subcat:
        data.append([row.id,row.nome])
    #data contiene tutte le coppie [id_sottocategoria,nome_sottocategoria]
    #restituiamo i dati alla funzione JQuery    
    return js.dumps(data)

Vediamo il codice javascript, anche qui le possibilità sono molte, ad esempio:

$(document).ready(function() {
//chiamo il metodo change per l'oggetto htaml con id="articoli_id_cat", cioè il menu a tendina delle categorie
$('#articoli_id_cat').change(function(){
//leggo l'id della categoria selezionata dal menu a tendina
var idcat=$(this).val();
//chiamo getJSON, la funzione sarà loadsubcat cui passo il parametro idcat
$.getJSON('loadsubcat',{'idcat':idcat},function(data) {
var options='';
for (j=0; j<data.length; j++) {
#i dati ricevuti da loadsubcat sono in data, li uso per creare tante option quante sono le sottocategorie
options +='<option value="' + data[j][0] + '">' + data[j][1]+'</option>';
}
#inserisco le option nel menu a tendina delle sottocategorie
$('#articoli_id_sub').html(options);
});});
});

Di seguito alcune immagini che dimostrano il risultato più le interessanti informazioni che ci fornisce Firebug.
Prossimamente cercherò di proseguire questo esempio arricchendolo di nuove funzionalità.
Cercheremo di visualizzare delle schede prodotto con le varie informazioni inserite e di avere un nuovo form attraverso il quale modificare un prodotto già inserito.
Anche in questo caso vedremo che la filosofia di Web2py, a mio parere giustamente orientata alla pratica ed alla velocità di realizzazione piuttosto che a soddisfare pseudo canoni estetici (è pythonico? potrebbe essere più pythonico?), ci viene in aiuto con delle brillanti soluzioni.

About the Author

Carlo Bazzo
Carlo Bazzo è fondatore di Epysoft, una start up tecnologica con sede a Treviso e CTO di Hdemo Network Business Solutions. Puoi contattare Carlo Bazzo su Linkedin.