How To: Pjax en Django Form

Esta es de las cosas que aprendo gracias a mi trabajo. Y resulta ser algo muy cool, les muestro: En este demo luego de activar el checkbox de pjax (si no están en internet explorer) -que asumo que no, para no enojarme apuff-. Pueden navegar por la página sin que esta haga refresh nunca. Nunca. Jamás. Y lo mejor es que el atrás, adelante e historial de su navegador sigue funcional.

Me explico si aún no ven la maravilla; esto es poder usar ajax en toda su web permitiendo navegar entre contenidos de diferentes urls con acciones de back y forward. En pocas palabras PushState + Ajax = pjax.

Para usar pjax en Django necesitan:

Sigan los pasos del setup y si tienen alguna duda, respondo en comentarios; pues la idea no es traducir tutoriales.

Hasta ahora todo suena bien hasta que se presenta el envío de un formulario por get. El truco está en que realmente no se hará nunca un submit como tal. Más bien se imita el submit de un form por get, que básicamente es el envío de datos por url -que gracias a pjax es posible-. Así:

$('#form-id').on('submit', function(e){
    e.preventDefault();
    $.pjax({
        url: $(this).attr('action') + '?' + $(this).serialize(),
        container: '#pjax-container-id'
    });
});

El serialize de jQuery retorna los datos de la forma listos para el url y es todo :) .

Dentro de los posibles problemas que se pueden presentar está que el action que le definan a la forma no sea la url exacta que usa Django para procesar esta vista; por ejemplo la falta del slash al final de la url puede generar una redirección y esto ocasiona múltiples procesos pjax al tiempo.

Para hacer debug de pjax simplemente agreguen esto a los parámetros:

error: function(e, xhr, err){
    alert('Error: ' + err);
}

Para todo lo demás están los comments :P .

Jack White – Love Interruption

Boolean desde JS a Python

En algún momento me encontré con el dilema de recibir booleanos en una función de Python que es llamada desde Javascript y la manera más limpia de hacerlo me pareció simplemente enviar un string desde el JS con algún valor, por ejemplo “true” y otro vacío “”; también podría usarse null. Si hacen la prueba en Python se puede ver que cualquier cadena no vacía en booleano es true, la cadena vacía resulta false y el null viene siendo None que también resulta false en booleano.

The Cardigans – Communication

PS: Gracias a @JamF0x por la alternativa de null !

Enter en un Form Ajax

Cuando se tiene una función ajax para manejar un formulario la gracia de todo es que las operaciones sean instantáneas y no se requiera nunca refrescar la página. La magia de ajax se pierde cuando el usuario termina; y en vez de darle click al botón que tiene bind, puesto con el mayor de los cuidados llamando a nuestra querida y mágica función ajax; el usuario da enter y nuestro form se envía dejando una pantalla blanca para nada mágica. La solución es tan simple como agregar este evento al form:

<form action="" method="post" onsubmit="return false;">
...
</form>

El botón sería algo así:

<input type="submit" value="Aceptar" />

O si prefieren el tag button:

<button type="submit">Aceptar<button>

Lo que sucede al definir onsubmit como “return false;” es que el formulario no hará el submit como normalmente lo haría, de hecho, no hará ningún submit. Esto arregla el problema inicial, ahora solo deben manejar el llamado ajax como deseen :) . En Django recomiendo usar dajax (L)

Lykke Li – Get Some (God bless Sweden (L) )

Baby Steps en Django

Antes de empezar a hablar de proyectos y demás addons de Django (pronunciado yan-goh, pues la ‘D’ es silenciosa) debí empezar por este post. Primero que todo muy resumido les digo que Django es de lo mejorcito en frameworks para desarrollo web y está hecho en Python.

Para usarlo por supuesto deberán tener instalado python en su útima versión estable preferiblemente. Si usas MacOS ya viene por defecto y es solo hacer esto para probar:

Python Consola

Lo siguiente es descargar Django descomprimirlo como prefieran y por consola cambiar al directorio donde se descomprimió y ejecutar lo siguiente:

Instalando Django

Que por supuesto yo no voy a correr porque ya lo tengo instalado :P .

Les pédira el pass de administrador y hará lo suyo…

Comprobamos que está django instalado; primero abrimos python y luego importamos django y le pedimos la versión instalada:

Comprobar instalación

(more…)

South

South es una herramienta que permite las migraciones en Django. Esto sirve al momento en que surgen cambios en el modelo y ya se ha creado la base de datos; y en el peor de los casos, ya se cuentan con datos por lo que hacer Drop y Sync DB no es una opción.

South se encarga automáticamente de identificar cuales fueron los cambios en el modelo y crea las migraciones necesarias para actualizar la base de datos, de esta forma en cada cambio se crean nuevas migraciones y mediante el historial de migraciones se pueden obtener versiones anteriores o posteriores de la BD.

Instalando South

En la página muestran varias formas de instalarlo, pero yo preferí irme por lo convencional y descargar el paquete desde aquí en la version 0.7.3 y luego instalarlo por la Terminal (en MacOS). El comando que usé luego de ubicarme en el directorio de South fue el siguiente:

sudo python setup.py install

Seguido me pide mi contraseña de administrador para instalar y si todo sale bien la última línea será algo así:

Finished processing dependencies for South==0.7.3

Para comprobar que efectivamente si se instaló South correctamente, importamos desde manage.py la aplicación y sino sale error we’re ready to go :) :

import south

Para empezar a usar South en algún proyecto, simplemente agréguenlo en el archivo settings.py de su proyecto de Django (que hallan creado previamente) en INSTALLED_APPS así:

INSTALLED_APPS = (
 'django.contrib.auth',
 'django.contrib.contenttypes',
 'django.contrib.sessions',
 'django.contrib.sites',
 'django.contrib.messages',
 'django.contrib.staticfiles',
 # Uncomment the next line to enable the admin:
 'django.contrib.admin',
 # Uncomment the next line to enable admin documentation:
 # 'django.contrib.admindocs',
 'prueba',
 'south'
)

Lo que sigue es hacer Sync DB. Yo uso eclipse, así que en Package Explorer hago click “derecho” (entre comillas, pues no existe tal cosa en MacOS, mas bien click con dos dedos ;) ), selecciono Django y luego Sync DB.

Django SyncDB

Pininos en South

Este tutorial no es más que mi versión de como hice los primeros pasos del tutorial que aparece en la página oficial.

(more…)

Cambiar y mostrar smilies en los comentarios

He recibido algunos mails preguntandome sobre como cambiar las smilies de wordpress y de paso como hacer que aparescan en la parte de comentarios y que al hacerles click se escriba el atajo de dicha smiley. Llevo un tiempo posponiendo este tutorial pero al fin aqui se los dejo :P . La verdad desconosco si existe o no un plugin que haga esto pero yo lo hago de esta forma y me funciona (aunque ya no se puedan deja comentarios) :P .
(more…)