lunes, 28 de marzo de 2011

[JQuery] Envío de Formulario, efecto Facebook Comments

Efecto Facebook Comment es el nombre que uso para referirme a la forma como esta Red Social muestra los comentarios inmediatamente siendo enviados, sin recargar el sitio.
Esto es algo sencillo que hacer con o sin Ajax, veremos el ejemplo usando Ajax y con la ayuda de JQuery.

Lo primero:
Antes que nada, necesitamos un formulario que recibirá el comentario y lo enviará al servidor para ser procesado:

Click para ver Grande

Nótese que tengo dos campos Hidden que hacen referencia a dos supuestos valores que estoy sacando de $_SESSION y que hacen referencia al usuario que está comentando y dónde está comentado.

Obviamente, necesitamos un DIV en el cual se contendrán los comentarios que se vayan agregando:




Ahora, necesitamos el código Javascript/JQuery que se encargará de procesar el formulario y mostrar la respuesta en el DIV que corresponde:



Expliquemos el código:
Tenemos un InputText que tiene como atributo ID el valor CommentBody, lo que hacemos a través de JQuery es decir que cuando el usuario precione una tecla, se active un evento que verifique si esa tecla es ENTER cuyo código es el 13, teniendo en cuenta que con el actual sistema de comentarios de Facebook los comentario se envía nomás presionando ésta tecla.
Si dado el caso se presiona la tecla ENTER, el Script automáticamente hará un llamado Ajax al Script FacebookComments contenido en el atributo Action del Formulario CommentForm.
Dicho Script no tiene más que un código que inserta el comentario en la Base de datos y luego lo muestra en el Div que los debe contener:

Click para ver Grande








Sobra decir que a este código le faltan muchas cosas, como verificaciones para Prevenir la Inyección SQL y la verificación de que todos los datos que se pasaron son correctos.
Como pueden apreciar, lo que hago es sencillamente, conectarme a la base de datos y ejecutar un Query SQL que insertará el comentario. Luego de insertarlo, hago un Echo que será la respuesta recibida por el Javascript que hace el llamado Ajax.

Como ven, es muy fácil crear comentario como lo hace Facebook, queda en sus manos agregarle efectos para que se vea más bonito, el típico FadeIn por ejemplo quedaría bien.

NOTA: No he testeado el código completamente, por ende, puede que haya por ahí, algún error de escritura, por favor, si tienes problemas con el código, hacermelos saber, los corregiré inmediatamente :).
Publicar un comentario