Actualiza un DIV usando menus y ajax.
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..
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..
Muchas gracias amigo me sirvió mucho sigue haciendo este tipo de tutoriales que nos ayudan mucho a todos gracias
De nada amigo,
Es un placer ayudar aunque sea un poquito..
hasta la próxima.
Muchas gracias, por tu aporte… soy nuevo en este tipo de tecnologías y el problema que tengo es que mis funciones javascript de las las paginas cargadas en el div ya no funcionan. Por favor si puedes ayudarme. Gracias
Bueno cual es el problema que estas enfrentando?
ver tu codigo y el HTML seria bueno tambien..
gracias.
hola amigo muy bueno el script div se actualiza con las paginas que yo pero tengo un pequeño problemita es que cuando le doy actualizar a la pagina y el div se regresa a la primera pagina y quiero que se quede en esa mis pagina que estaba como lo puedo hacer agradesco tu ayuda
Hola,
creo que e leido tu comentario algo tarde, pero solo me queda pedirte que me aclares la pregunta porque no la tengo bien clara en mi mente…
de ante mano Gracias.
Ya mira el script me actualiza el div con las páginas que yo quiero pero el problema está a la hora de actualizar la pagina el div se vuelve a su estado inicial y lo que quiero es que se mantenga en la misma página que estaba y que no regrese a su estado inicial porfavor lo necesito conurgencia muchas gracias amigo
A su estado inicial en blanco?
como es posible eso si lo estas actualizando con los resultados del archivo al cual estas accesando.. esa es la parte que no entiendo.. mientras el documento que accesas sea el mismo y el mismo resultado se te dará… creo que para entender mejor tendría que ver tu trabajo.. o pagina.. gracias.
ok mira mi pagina esta aki http://www.jlvo.comeze.com alli tienes un menu con varias opciones situ haces clic por ejemplo en contactenos te carga el formulario de contacto asta alli todo bien pero a la hora que le doy que se actualize la pagina buelve a su estado inicial gracias amigo por tu respuesta o que opciones me das
Hola,
Lo que estas haciendo es llamar a “contactenos/form-contacto.php”
con ajax eso esta bien,
Tu forma esta posteando la información aquí “action=”#”" que es a si mismo, si le doy clic en el index de tu pagina la forma va intentar postear a el index lo cual hace que se muestre lo que esta en el index.. si hicieras que tu forma fuera en ajax no tendrías ningún problema en conseguir los resultados de la forma de contactos.
espero sea claro.
hola amigo no tengo clara tu idea a lo que yo me refiero es que este en cualquier parte del menu y presiono f5 para recargar la pagina se vuelve al estado inicial como lo podria solucionar
Bueno, eso no se puede es parte de ajax..estas llamando a un documento que no es parte de esa pagina. Si lo llamas desde otra pagina el presionar f5 siempre tedara el contenido propio d
e ese url..ya que ese es el contenido de esa especifica pagina.