Actualiza un DIV usando menus y ajax.

Escrita por , 29 June 2011

Bueno,

Un amigo que posteo por acá, me pidió que como le aria para que se actualizara un DIV usando un evento onClick de un Menú y que cuando este se presionara este llenara con el contenido de otro documento un respectivo DIV..

ejemplo para como utilizar Ajax con una base de datos Mysql Maneja datos de Mysql con Ajax

Como actualiza un DIV con un documento determinado , dependiendo de el enlace o hyperlink que fue cliqueado, usando AJAX..

Cliquea aquí para ver una demostración de como quedo..

Entonces me vi en la tarea de hacerlo un echo e aquí el resultado:

  • Primero, nuestro interés esque cada hyperlink en el Menú, lleve respectivamente a una pagina HTML, PHP o TXT.
  • Segundo, saber el ID del DIV donde quieras que aparezca.
  • Tercero crear los documentos y colocar su ubicación el los “lis “del menu.

Ahora en una pagina html, php, shtml. copia y pega esto:

<html>
<title>Request a page onclick Menu</title>
<head>
<script type="text/javascript">

function getPages(divid,url)
{
	
 if(divid !="" && url != "")
 {
	var ob= AjaxObject();
	var unixTimeStamp= fetch_unix_timestamp();
	var nocacheurl = url+ "?t=" + unixTimeStamp;
	
	ob.onreadystatechange=function()
	{
      if(ob.readyState==4)
       {
		   if(ob.status == 200)
		   {
			   if(ob.responseText != null)
			   {
				   document.getElementById(divid).innerHTML=ob.responseText;
			   }else
			     {
					 alert('There was an error: no data was received');
				 }
		   }else
		     {
			   alert('Ajax error:' + ob.statusText);
		     }
		}
    }
    ob.open("GET",nocacheurl,true);
    ob.send(null);
	}else{
    alert('Se te a olvidado colocar el id del DIV o el URL en el href  del achor tag, en el evento de onClick ');
	}
}
	
function fetch_unix_timestamp()
{
    return parseInt(new Date().getTime().toString().substring(0, 10))
}


function AjaxObject()
{
var xmlHttp;
  try{
   return xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
    }
     catch (e){
     try{
      return xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
       }
       catch (e){
       try{
        return xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
       catch (e){
     alert("Sorry AJAX is not supported by your browser.");
    return false;
  }
 }
}
}
</script>

</head>
<body>
<ul>
<li><a href="my_text.txt" onClick="getPages('response',this); return false" >Cliqueame porfavor</a></li>
<li><a href="second_text.txt" onClick="getPages('response',this); return false" >Cliqueame aqui tambien.</a></li>
</ul>
<div id="response"></div>
</body>
</html>

Ahora explico la función getPages(divid,url) es la que ara todo el trabajo por nosotros, esta función puede ser pasada en el onclick de un boton o de A (anchor tag) de un hyperlink.

Solo pasas en el primer argumento el id del DIV donde quieres que aparezca el contenido del documento y en el segundo el url del documento que aparecerá en el DIV del primer argumento , que en este caso esta definido en el HTML markup, que es el DIV id=”response”.

Entonces en el href del anchor tag colocas el onClick=”getPages(‘response’,this)” donde el “response” es el ID del DIV, y this es referido al objeto que es el URL del href.

Así mismo si quieres usarlo en diferentes DIV también funcionaria solo colocas el ID del DIV donde quieras que el conteniendo del documento aparezca..

Así si lo deseas puedes colocar el contendido de cualquier documentos en diferentes DIVs sin ningún problema..

Bueno hasta la próxima, gracias por leer este tutorial..

Categorias : Guias para la Web,Un poco de html Etiquetas :

Comentarios
5 June 2013

Hola tengo un problema con mi pagina, las páginas que llamo desde un menú para cargarlas en un div, no carga, sino que se actualiza la pagina completa, me urge de tu ayuda para poder aclarar el problema; de antemano gracias por el aporte.

Echo by andres
5 June 2013

Hola,

Eh visto tu web, de no ser que tienes errores de markup, lo unico que creo que pueda estar haciendo incompatibilidad en yQuery.. trata de desligar jQuery Mejor observa las lineas donde llamas a la funcion me parese que estas usando single quotes y tendrias que usar dobles…

gracias.

Echo by UTAN
Deja tu comentario

(requerido)

(requerido)