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

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…)

Bootstrap!

El título del post bien podría ser suficiente y ya podrían parar de leer los que saben a lo que voy. Pero tu que seguiste leyendo, entérate:

  • Bootstrap es un toolkit de estilos CSS, muy web 2.0 y muy muy bonito, listo para usar  y creado por Twitter.
  • En su última versión le agregaron también funciones de JavaScript que complementan el CSS.
  • Es cross-browser :) .
  • Bootstrap también viene en versión LESS; esto es CSS un poco más inteligente y reutilizable (L) .
  • La documentación habla por sí sola, es el vivo ejemplo de Bootstrap en acción y todo muy bien explicado.
  • Para los que ya usan uni-form, es completamente compatible usando estos templates.

Este proyecto resulta de lo más interesante para programadores que no tienen tiempo, no saben diseñar (vamos, que ninguno de nosotros programa y diseña. No mientan por favor) ni tienen dinero para pagar por un diseño. Y sé que en esta definición se van un poco ;) . Bootstrap tiene la paleta de colores ideal para la mayoría de páginas y además puede acomodarse con otros colores. Por todo eso, recomiendo mucho este proyecto, existen muchas alternativas, pero me parece esta la más fácil de usar, muy funcional y atractiva.

Bootstrap en GitHub

Amy Winehouse – Tears Dry On Their Own

South para no-geeks

Tratando de explicar este post a alguien que ni idea de nada de nada, se me ocurrió algo que vale la pena poner acá para cualquiera que quiera enterarse siquiera de tablas de bases de datos.

no-geek: ¿May pero todo eso al fin para que sirve?

May: Imagina que estas jugando stop (ese juego cuando una era chiquita, que con una letra debes llenar una tabla en el menor tiempo). Y han jugado ya cuatro letras y tienes la hoja llena de campos, no cabe otra columna más. Luego llega alguien nuevo y dice que quiere jugar pero que sería mejor si agregaran el campo nombre de mascota. ¿Habría que cambiar de hoja y hacer la tabla de nuevo, no?

no-geek: Si, eso pasaba a veces

May: Si hubieses tenido South, se te habría agrandado la hoja y agregado el campo nombre de mascota

Got it? :) :nerd:

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…)