Recargar con Ajax un solo div con diferentes contenidos

morbo198 · #1 (**permalink**) 18/12/2011, 19:28

Necesito ayuda para lo siguiente espero y me puedan ayudar les muestro el index y despues el codigo de ajax

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recarga de contenido con Ajax</title>
<script src="ajax.js" language="javascript" type="text/javascript"> </script>
</head>
<body>
<a href="#" onclick="recarga(div1,contenido1.html)">AQUI 1</a>
<a href="#" onclick="recarga(div1,contenido2.html)">AQUI 2</a>
<a href="#" onclick="recarga(div1,contenido3.html)">AQUI 3</a>
	
<div id="div1">
</div>

</body>
</html>

lo que quiero hacer esque cuando pulse cada link me recargue difrente contenido en el mismo Div aqui les presento el codigo que estoy utilizando

Código:

function recarga(divid,url)
{

var divid,url,fetch_unix_timestamp;

if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}



var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); 
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}

// Timestamp para evitar que se cachee el array GET

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// llamando al ajax
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

en la validacion de las variables me marca el segundo error que tengo descrito, este es el error que sale en el alert Error: el Div ID selectionado no esta definido: [object HTMLDivElement] jajaja y no entiendo el porque

zerokilled · #2 (**permalink**) 18/12/2011, 19:47

buenas...
fíjate los parámetros que le estas pasando a la función "recarga", específicamente el primero. si estas haciendo la prueba en iexplorer o chrome, dicho parámetro representa un objeto HTMLElement porque en dichos navegadores todos los elementos con ID pasan a ocupar una variable global con el mismo nombre. de todos modos, es algo que esta mal hecho. no obstante, sirvase de base para entender el error del código. más adelante, la función utiliza dicho parámetro para obtener el elemento por su id, pero antes haces unas comprobaciones. por tanto, un objeto HTMLElement no es lo mismo que un string vacio; esa es la primera comprobación que realizas. la segunda, es determinar si dicho elemento existe. lo pasas como argumento de getElementById. pero dicha función solo acepta string. como le estas pasando un objeto, entonces la función devueve null. luego inviertes el valor con el operador not. de modo que "not null" equivale a true. es por esa razón por la que entra en la condición y muestra el mensaje de alerta. tu error esta en el parámetro que le pasas a la función "recarga", pues debe ser un string.

morbo198 · #3 (**permalink**) 18/12/2011, 19:53

Gracias amigo, leer con cuidado lo que me has puesto y tratar de comprenderlo ya que se me hizo algo confuso XD, le batallare estos días a ver que sale. jejeje se aceptas mas comentarios XD