Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Añadir comentario con AJAX

Estas en el tema de Añadir comentario con AJAX en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/08/2011, 13:02
Avatar de morfasto  
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 13 años, 4 meses
Puntos: 8
Añadir comentario con AJAX

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!!
  #2 (permalink)  
Antiguo 22/08/2011, 14:55
Avatar de malakian  
Fecha de Ingreso: septiembre-2010
Ubicación: $malakian->Colombia();
Mensajes: 469
Antigüedad: 14 años, 3 meses
Puntos: 45
Respuesta: Añadir comentario con AJAX

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 original
  1. echo         '<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 original
  1. function inserta_video(comentario){
  2.  
  3.     myAjax.open("POST", "anadir_video.php");
  4.     myAjax.onreadystatechange = resultado;
  5.  
  6.     myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  7.  
  8.     myAjax.send("comentario="+comentario);
  9.  
  10. }
  11.  
  12. function resultado(){
  13.     if (myAjax.readyState == 4) {
  14.         var r = myAjax.responseText;
  15.                 document.getElementById('añadir_comentarios').innerHTML = r;
  16.     }
  17.         return false;
  18. }
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
__________________
Guitar Loco, Desarrollador Web PHP
Sigueme: @jose1x

Última edición por malakian; 22/08/2011 a las 15:01

Etiquetas: ajax, comentario, mysql, php, post, select, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:02.