Múltiples Respuestas AJAX, pero en un sólo DIV

cambalacheweb · #1 (**permalink**) 05/09/2008, 21:27

Saludos,

Voy a hacer una aplicacion ajáx, pero mi idea es que cuando ejecute una función se generé la respuesta en un DIV ó Contenedor, y luego cuando ejecute otra función con X evento, se AGREGUE la respuesta debajo, al lado, o a continuacion de la respuesta generada con la anterior funcion.

Hice la prueba, dos botones, dos archivos ajax, diferentes respuestas, pero en el mismo DIV contenedor. Cuando ejecuto la primera función se genera la respuesta en el DIV contenedor, pero al ejecutar la segunda función en vez de colocarse la respuesta continua a la respuesta de la anterior función en dicho DIV, pues simplemente borra la respuesta anterior y se coloca esa segunda respuesta como sola, osea, me Actualiza la información del DIV y no me AGREGA la información.

Hay alguna manera de hacerlo ?? De agregar respuestas en un mismo DIV y contenedor, y no sustituirse una respuesta encima de otra ???

Gracias !!

emiliodeg · #2 (**permalink**) 06/09/2008, 00:09

fijate de ir acumulando y no igualando!

seria intersante ver el codigo para ver donde esta el error

cambalacheweb · #3 (**permalink**) 06/09/2008, 06:43

Ok... le pongo el código sencillito, ya lo hice en Dreamweaver, lo pueden copiar y pegar para que vean. Son 4 documentos... el index.php, el procesador_ajax.js, y los documentos que llama el ajax que son dos, Procesador_1.php y Procesador_2.php

index.php

Código HTML:

<!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" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript" src="ajax_javascrtipt.js"></script>
</head>

<body>
<div id="contenedor" style="background-color:#CCCCCC; border:2px solid #000000; position:relative; height: 50px; width: 100px"></div>

<p>
Haciendo Click aqui verán el Primer dato en el DIV Contenedor
<input type="submit" name="button2" id="button2" value="DATO 1" onclick="dato_1(1)" /> 
( El resultado es &quot;1&quot; )
</p>
<p>
Haciendo Click aqui verán el Segundo Dato en el DIV Contenedor
  <input type="submit" name="button" id="button" value="DATO 2" onclick="dato_2(2)" /> 
  (Este deberia adjuntarse al dato anterior, pero como verán lo que hace es sustituir el primero)  El resultado es &quot;2&quot;, mientras que debería ser &quot;12&quot;
</p>
</body>
</html>

procesador_ajax.js

Código:

function conectar_XMLHTTPRequest()
{	
try 
{req = new XMLHttpRequest();} 
catch(err1) 
{
	try 
	{req = new ActiveXObject("Msxml2.XMLHTTP");} 
	catch (err2) 
	{
		try	
		{req = new ActiveXObject("Microsoft.XMLHTTP");} 
		catch (err3) 
		{
		req = false;
	}
}
}
return req;	
}
var conexion = conectar_XMLHTTPRequest();



function dato_1(valor)
{
	var	valores		=		'valor='+valor;
	var url			=		'Procesador_1.php';
	conexion.open("POST", url, true);
	conexion.onreadystatechange = function () {
	
		if (conexion.readyState == 4)
		{
			if(conexion.status == 200)
			{
			var contenedor	=	document.getElementById('contenedor');
			contenedor.innerHTML	=	conexion.responseText;
			}
		}
}
	conexion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	conexion.send(valores);
}


function dato_2(valor)
{
	var	valores		=		'valor='+valor;
	var url			=		'Procesador_2.php';
	conexion.open("POST", url, true);
	conexion.onreadystatechange = function () {
	
		if (conexion.readyState == 4)
		{
			if(conexion.status == 200)
			{
			var contenedor	=	document.getElementById('contenedor');
			contenedor.innerHTML	=	conexion.responseText;
			}
		}
}
	conexion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	conexion.send(valores);
}

Procesador_1.php

Código PHP:

  <? 
$valor    =    $_POST['valor']; 
 
        echo $valor; 
 
?>

Procesador_2.php

Código PHP:

  <? 
$valor    =    $_POST['valor']; 
 
        echo $valor; 
 
?>

Como verán el resultado de la respuesta AJAX número 2, no se acumula al lado de la primera respuesta, sino que la sustituye, y bien como el amigo emiliodeg lo dice, lo que quisiera es acumular respuestas en un mismo DIV o Contenedor, y no que una me sustituya la otra... !!

Gracias por su ayuda.

caricatos · #4 (**permalink**) 06/09/2008, 10:04

Hola:

Simplemente añade un símbolo "+" antes de la igualdad al recinir esos datos.

Código:

contenedor.innerHTML	+=	conexion.responseText;

Saludos

cambalacheweb · #5 (**permalink**) 06/09/2008, 17:10

Muchas Gracias por tu Respuesta Caricatos !!! Funcionó perfecto !!!