Ajax, jQuery i Django
En alguns projectes personals amb Django estic fent servir un bastiment javascript anomenat jQuery. jQuery simplifica força la feina de posar javascript a les nostres pàgines i el seu cost en termes de complexitat de programació i pes dels javascripts és molt baix, tant baix com els 19 Kb de la llibreria comprimida, tal com es pot devallar de la seva pàgina.jQuery està molt ben documentat, encara que sense arribar al nivell de YUI, i triar una llibreria o una altra és moltes vegades qüestió de preferències personals.
Amb els components DOM i Event de YUI tenim pràcticament el 99% de la funcionalitat de jQuery, però la cosa està en que si la nostra aplicació no fa un ús intensiu de javascript i a més volem tenir alguns efectes rollo web 2.0, doncs jQuery és una bona elecció. Si la nostra aplicació ha de ser molt més de tipus escriptori, directament aniria cap a YUI, ja que l'extra de components i funcionalitat que proporciona YUI és precisament el que li falta a jQuery.Quan posam jQuery i Django junts dins una típica aplicació web la combinació és molt bona. jQuery té tot un conjunt de funcions per fer peticions HTTPXMLRequest i tractarles i Django ho fà fàcil.Per exemple, suposem que volem generar un codi aleatori quan l'usuari faci doble clic dins un camp de text
La part de Django seria:
definir la url que cridarem dins urls.py
(r'^ajax_get_codi/$','ajax_get_codi'),
escriure el codi que ens tornarà la informació que volem , això es fa dins views.py i pot ser una cosa tan simple com
def ajax_get_codi(request):
"Torna un codi aleatori de vui caràcters alfanumèrics."
import string
import random
llista = string.ascii_uppercase+string.digits
codi = random.sample(llista,8)
s = ''
s.join(codi)
return HttpResponse(codi, "text/html")
Hi ha tantes maneres d'escriure aquest codi com programadors, sols notar que el que estam fent és que en lloc de tornar el control cap a una plantilla de Django retornam directament text amb el codi que volem presentar.
La part javascript:
$(document).ready(function(){
/* codi anterior ... */
{% if not codi %}
/*Si estam en mode insercio permet crear un codi
fent doble click */
$("#id_referencia").dblclick(function () {
$.ajax({
url: "/agencia/ajax_get_codi/",
success: function (msg) {
$("#id_referencia")[0].value = msg;
}
});
});
{% endif %}
});Aquest javascript està dins una plantilla que hereta, sí heu llegit bé, hereta, d'una plantilla base que conté els includes comuns a tota l'aplicació. Un d'aquests includes és el jQuery. La resta és limita a que quan el formulari esta en mode insercio, la plantilla "pinta" la funció javascript i la lliga al control de text.
