Contenido

¿Como poner ajax a los comentarios?

9 dic

+ 4

Como le prometi a Show de Show Weblog, aqui traigo un mini tutorial de como hacer que los comentarios sean dinámicos.

En esta primera entrega, por falta de tiempo me voy a centrar en la insercción dinámica de comentarios. En futuras entregas ire poniendo como leerlos dinámicamente.

Pasos:

  1. Necesitamos crear un objeto conexión como explicamos en el post de Introducción a Ajax.
  2. Necesitamos montar una función en Javascript que nos mande los datos del formulario de comentarios al fichero donde insertamos los datos.
  3. Montarlo todo sobre el template.

1. Creacion del objeto HttpRequest

Para la creación del objeto vamos usar una clase llamada XConn, simplifica enormemente el sistema de creación de objetos httpRequest.

  1. Descargamos el fichero js (HXConn.js)
  2. Y lo añadimos en el fichero header.php de nuestro theme.

Hay que tener cuidado a la hora de insertarlo ya que hay que poner toda la ruta del fichero.

Recomiendo usar la función de wordpress bloginfo(‘stylesheet_directory’); de esta forma.

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/XHConn.js" type="text/javascript" ></script>

2. Montamos la función para insertar los comentarios

Esta función debe ir introducida en el codigo antes de su nombramiento en el boton enviar de los comentarios. Yo personalmente prefiero tener todas las funciones javascript en un fichero a parte y luego llamarlo desde el head, pero tambien se pueden introducir en la pagina de comments.php usando las etiquetas <script></script> alojando dentro el codigo de la función.

function NuevoComment(id,url,formulario){
//Datos del comentario
autor = escape(formulario.elements["author"].value);
email = escape(formulario.elements["email"].value);
url = escape(formulario.elements["url"].value);
comment = escape(formulario.elements["comment"].value);
var myConn = new XHConn();
//si el nagevador no soporta XMLHTTP entonces manda un aviso.
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
//funcion que ejecuta la conexion una vez ejecutado el envio
//en nuestro caso escribimos el html con los comentarios y el formulario
var inserta = function (oXML) {alert("Su comentario ha sido insertado");};
//llamamos a la funcion y le pasamos la id del articulo
myConn.connect(action, "POST", "comment_post_ID="+ id +"&author=" + autor + "&email=" + email + "&url=" + url + "&comment=" + comment, inserta);
}

Para que esto funcione el template ha de respetar los nombres del formulario original (Kubrick).

Recomiendo introducir un div para albergar el resultado de la operación, pero eso ya a gusto del programador ;).

3. Motamos el template

Para montar el template no necesitamos mucha cosa, unicamente hemos de coger y cambiar la linea donde se encuentra el boton de enviar y le añadimos al evento onClick la siguiente función.

Luego tenemos que poner la función que hemos creado anteriormente en algun fichero o incluso en el mismo comments.php del templat, usando las tags <script></script&gt; para inserta el codigo Javascript.

<input class="button" name="submit" id="submit" type="button" tabindex="5" value="Enviar" onClick="NuevoComment('<?php echo $post->ID ?>','<?php echo get_option('siteurl'); ?>/wp-comments-post.php',this.form);"/>

Actualizacion

He añadido un alert a la función en Javascript, creo que de esta forma ya queda más claro.

  • No me queda nada claro donde tengo que añadir la función esa… :S la NuevoComment()

  • Esta función debe ir introducida en el codigo antes de su nombramiento en el boton enviar de los comentarios. Yo personalmente prefiero tener todas las funciones javascript en un fichero a parte y luego llamarlo desde el head, pero tambien se pueden introducir en la pagina de comments.php usando las etiquetas <script></script> alojando dentro el codigo de la función.

    Perdona, pero es que no ando muy bien de tiempo y queria ponerlo lo más claro posible.

    Si la insertas como cualquier función javascript te servira ;)

  • Te voy a dar la paliza… xD Lo estoy probando en el localhost y no encuentro diferencia entre ahora y antes, no se que abré hecho mal.

    No me sale nada, ni ruedecita girando (supongo que el código puesto será para que salga igual que a ti) ni ningún error.

    Simplemente se recarga la página y sale el comentario.

  • No es igual que el mio, ya que vosotros no teneis la imagen de Loading.

    Si te pasa eso es por q no has quitado el type del boton como yo lo he puesto en el post :D

    —————————–
    type=”button”
    —————————–

    Para mostrar mensajes del tipico “El comentario ha sido guardado”, usa un div a parte donde alojar la información usando un innerHTML.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.