Añadir comentario con AJAX

morfasto · #1 (**permalink**) 19/08/2011, 13:02

Hola, que tal?

Antes que nada, quiero disculparme por hacer un post del mismo tema de nuevo, pero no puedo editar el anterior (La opcion de like), asi que decidi hacerlo de nuevo, corrigiendo el tema.

Bueno, llevo ya casi 1 semana intentando lograr esto y hasta ahora no he podido, pero si he aprendido "algo" al menos.

Veamos, tengo una pagina en la que se muestra un video, su descripcion y comentarios. El problema esta en la parte de los comentarios, ya que cuando se añade el cometario, se procesa el anadir_comentario.php y luego se regresa a la pagina de los videos, es decir la pagina de videos se "refresca". Pero, cual es el problema ahi?, bueno, si estaba viendo el video, este se refresca y tiene que cargar de nuevo.

Estuve buscando y encontre que con Ajax esto se podia lograr, ya que al mandar el formulario, podia hacer que se refresque solo la parte del comentario, sin detener la descarga del video que esta siendo visto. Como lo hago?

Encontre una pagina en la que explicaban mas o menos como funcionaba, pero no llegue a entenderlo bien, entonces no pude acomodarlo a mi gusto para que funcione en mi pagina.

Les voy a poner mi codigo para ver si podrian ayudarme en esto.

video.php (ejemplo: video.php?id=5)

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" /> 
 
<?php  
// Aqui se conecta a la base de datos y hace las consultas necesarias 
    (isset ($_GET['id']))? $id = $_GET['id'] : $id = NULL;       
        session_start();  
    function conectarse($host,$usuario,$password,$BBDD){  
       $link=mysql_connect($host,$usuario,$password) or die (mysql_error());  
       mysql_select_db($BBDD,$link) or die (mysql_error());  
       return $link;  
    }  
 
$link=conectarse("host","usuario","password","base_datos");   
 
$video = "SELECT * FROM `videos` WHERE `video_id` = '$id'"; 
$video = mysql_query($video, $link);  
 
$comentario = "select comment_id, comment, nombre, apellido from video_comments, usuarios where video_comments. usuario_id = usuarios.usuario_id and video_id = '$id' order by 1 desc"; 
$comentario = mysql_query($comentario, $link);  
 
?>  
<title>Videos</title> 
</head> 
<div id="video"> 
        <?php  
// Aqui se muestra el video 
          $rs=mysql_fetch_array($video); 
            echo      "<object style='height: 200px; width: 400px'>" 
                    ."<param name='movie' value='http://www.youtube.com/v/" .$rs['url']. "'>" 
                    ."<param name='allowFullScreen' value='true'>" 
                    ."<param name='allowScriptAccess' value='always'>" 
                    ."<embed src='http://www.youtube.com/v/" .$rs['url']. "' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='640' height='390'>" 
                    ."</object>"; 
        ?> 
</div> 
 
 
<div id="lista_comentarios"> 
    <?php 
// Aqui se muestra el nombre y apellido de la persona que puso su comentario y el comentario  
        while($rs=mysql_fetch_array($comentario))  
          {  
            echo         "" .$rs['nombre']. " " .$rs['apellido']. ": " .$rs['comment']. "<br />"; 
          }  
    ?> 
</div> 
 
 
<div id="añadir_comentarios"> 
    <?php 
// Si el usuario esta logueado, se muestra la opcion para añadir un comentario, sino no se muestra nada 
        $_SESSION['codigo_video']= "$id"; 
        if (isset($_SESSION['s_username'])) {  
        echo         "<form method='post' action='anadir_comentario.php'>" 
                    ."<input type='text' name='comentario' value=''>" 
                    ."<div id='hide'><input type='text' name='id'" 
                    ."value='" .$id. "'>" 
                    ."</div>" 
                    ."<input type='submit' value='Add' />" 
                    ."</form>"; 
        }else{  
        echo     ""; } 
    ?> 
</div> 
</body> 
</html>

anadir_comentario.php

Código PHP:

  <?php 
session_start();  
 
$con = mysql_connect("localhost","root",""); 
 
if (!$con) 
  { 
  die('Could not connect: ' . mysql_error()); 
  } 
 
mysql_select_db("longdoarb", $con); 
 
$comentarios="INSERT INTO video_comentarios (comentario_id, usuario_id, video_id, comment) 
VALUES 
('','$_SESSION[usuario]','$_POST[id]','$_POST[comentario]')"; 
 
if (!mysql_query($comentarios,$con)) 
  { 
  die('Error: ' . mysql_error()); 
  } 
 
mysql_close($con); 
 
header ("Location: /video.php?id=".$_SESSION['codigo_video']); 
 
$_SESSION['codigo_video']= "" ; 
?>

Hasta ahi es donde he podido avanzar, todo eso funciona muy bien, pero con el problema de que se refresca toda la pagina cuando se añade un comentario.

Espero me puedan ayudar en esto.

Muchas gracias!!

malakian · #2 (**permalink**) 22/08/2011, 14:55

Hola, como dijiste, con Ajax puedes llegar a la solucion...

primero crea un archivo .js e incluyelo en video.php...

busca como crear un objeto xmlhttprequest... encontraras un codigo JavaScript,lo debes poner en tu archivo .js

Ahora modifica la linea donde esta el form y colocas

Código PHP:

Ver originalecho         '<form method="POST" action="anadir_comentario.php" onsubmit="return inserta_video(comentario)">'

Algo asi, (modifique algunas cosas de esa linea)

ahora en tu archivo .js debes definir una funcion que se encargue de hacer la insercion del video y mostrarlo...

Código Javascript:

Ver originalfunction inserta_video(comentario){
 
    myAjax.open("POST", "anadir_video.php");
    myAjax.onreadystatechange = resultado;
 
    myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 
    myAjax.send("comentario="+comentario);
 
}
 
function resultado(){
    if (myAjax.readyState == 4) {
        var r = myAjax.responseText;
                document.getElementById('añadir_comentarios').innerHTML = r;
    }
        return false;
}

Recuerda que MyAjax es el objeto que te dije que investigaras...
debes modificar tu archivo anadir_comentario.php... despues de insertarlo debes hacer un select para mostrar los comentarios asi como hiciste en el archivo video.php...
y el resultado lo imprimes con echo...
En el codigo que escribi arriba en la variable r esta guardado lo que imprimiste con el echo
todo esto se recagara en tu div con id="añadir_comentarios"

basicamente es eso.... espero te sirva, creo que existen mejores formas dehacerlo, si alguien me quiere corregir, acepto las criticas con gusto