Duda con AJAX

hgp147 · #1 (**permalink**) 27/12/2007, 12:51

Hola, tengo por ejemplo un código como este:

Código HTML:

<form  action="#" onsubmit="FAjax('procesa.php','capa','comentario='+document.getElementById('comentario').value,'POST'); return false" method="post">

<div id="capa">
</div>
<textarea id="comentario"></textarea>
<input type="submit">

</form>

Este archivo .js

Código:

*Esta libreria es una libreria AJAX creada por Javier Mellado con la inestimable
*colaboracion de Beatriz Gonzalez.
*descargada del portal AJAX Hispano http://www.ajaxhispano.com
*contacto [email protected]
*
*Puede ser utilizada, pasada, modificada pero no olvides mantener 
*el espiritu del software libre y respeta GNU-GPL
*/

function creaAjax(){
  var objetoAjax=false;
  try {
   /*Para navegadores distintos a internet explorer*/
     objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
     /*Para explorer*/
     objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
     } 
     catch (E) {
     objetoAjax = false;
   }
  }

  if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
   objetoAjax = new XMLHttpRequest();
  }
  return objetoAjax;
}



function FAjax (url,capa,valores,metodo)
{
   var ajax=creaAjax();
   var capaContenedora = document.getElementById(capa);

    ajax.open ('POST', url, true);
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.send(valores);
    
    
 
    ajax.onreadystatechange = function() {
         if (ajax.readyState==1) {
                 
                 capaContenedora.innerHTML="Cargando.......";
         }
         else if (ajax.readyState==4){
                          
                 capaContenedora.innerHTML=ajax.responseText;
                 
                 }
                            

     
        }
    }

Y procesa.php

Código PHP:

  <?

$comentario = $_POST["comentario"];

echo $comentario;

// Despues hay un código que guarda el comentario en una db

?>

Con estos códigos logro que cada vez que toco el boton submit que se muestre el comentario. Ahora, lo que quiero es que conserve los comentarios anteriores, es decir que al tocar el submit me muestre el comentario, luego al tocarlo de nuevo(el submit) que me aparezca ese nuevo comentario debajo del anterior y asi sucesivamente.
Si no entienden avisenme.

Gracias.

GatorV · #2 (**permalink**) 27/12/2007, 13:08

Puedes hacerlo de dos formas, la primera en tu script PHP, en lugar de hacer un echo $comentario, hagas un SELECT y leas todos los comentarios y asi darle en echo a todos los comentarios.

Otra opcion es en lugar de usar innerHTML a la hora de poner el resultado, uses algo asi:

Código:

var contenido = capaContenedora.innerHTML;
var new_comment = ajax.responseText;

capaContenedora.innerHTML = contenido + new_comment;

Saludos.

hgp147 · #3 (**permalink**) 27/12/2007, 13:58

La primera opción que me diste funciona bien, pero la segunda que es la que más me interesa (ya que no tiene que recargar todos los comentarios) no me funciona (no muestra el comentario en el div).

Dejo aca los códigos, para ver si hay algún error:

Código HTML:

<html>
<head>

<script language="Javascript" src="libreriaAjax1.js" type="text/javascript"></script>

</head>

<body>

<form method=post onsubmit="FAjax('procesa_comentarios1.php','comentarios','de='+document.getElementById('de').value+'&amp;comentario='+document.getElementById('comentario').value,'POST'); return false" action="#">

<input type="text" name="de" id="de" size=20>

<textarea name="comentario" id="comentario"></textarea>

<input type=submit value=enviar>

</form>

<div id="comentarios">

</div>



</body>
</html>

libreriaajax1.js

Código:

/*
*Esta libreria es una libreria AJAX creada por Javier Mellado con la inestimable
*colaboracion de Beatriz Gonzalez.
*descargada del portal AJAX Hispano http://www.ajaxhispano.com
*contacto [email protected]
*
*Puede ser utilizada, pasada, modificada pero no olvides mantener 
*el espiritu del software libre y respeta GNU-GPL
*/

function creaAjax(){
  var objetoAjax=false;
  try {
   /*Para navegadores distintos a internet explorer*/
     objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
     /*Para explorer*/
     objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
     } 
     catch (E) {
     objetoAjax = false;
   }
  }

  if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
   objetoAjax = new XMLHttpRequest();
  }
  return objetoAjax;
}



function FAjax (url,capa,valores,metodo)
{
   var ajax=creaAjax();
   var capaContenedora = document.getElementById(capa);
   var contenido = capaContenedora.innerHTML;
   var new_comment = ajax.responseText;

    ajax.open ('POST', url, true);
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.send(valores);
    
    
 
    ajax.onreadystatechange = function() {
         if (ajax.readyState==1) {
                 
                 capaContenedora.innerHTML="Cargando.......";
         }
         else if (ajax.readyState==4){
         
         
                 capaContenedora.innerHTML = contenido + new_comment;

                 
                 }
                            

     
        }
    }

El archivo php sigue con el mismo código.

Gracias