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:
[php]
<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>
[/php]
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.
hola
si te das cuenta tu código tiene un pequeño error pero muy grabe ¿ que pasaría si yo actualizo la pagina por si me sucedió algún problema ?
respuesta: pos regresa a su antigua forma ese es el problema de tu código espero que busques una solución por que me pasa eso ami
No hay solución a eso,
Ajax funciona de esa manera, porque haces una llamada asincrónica..
El documento que llamas por ajax no existe en el documento en el cual es llamado, al refrescar tu llamada empieza por lo mas actual que tengas en el documento al que llamas.., lee de sus ventajas y desventajas..
gracias
use el codigo para rellenar un div lo puse dentro de una funcion para poderlo llamar muchas veces, la llamada a la funcion se hace con un timer de 2 segundos, el problema es que no se actualizan los cambios que se hacen de entre una llamada y la otra, yo pense que por concatenar el valor de la funcion del tiempo esto se arreglaria pero no fue asi, que crees que puedo hacer?
Gracias!
hola,
Pega tu codigo entre php tags [ php ][ /php ] sin los espacios para saber que es lo que tratas de hacer.
gracias
es basicamente tu codigo tal cual, pero manda llamar a un archivo de texto no a un php, esa es la unica diferencia, ese archivo de texto esta continuamente cambiando, mi plataforma de trabajo es JSP, esto presenta algun problema? es decir todo es javascript no deberia de implicar problemas que no?
De verdad gracias!
Ok,
Bueno, dices que es un archivo txt, si es así como es el browser el que esta corriendo la llamada el Ajax call solo te printeara el contenido de ese texto.. Porque quien hacer el parsing es el Servidor propio, acuérdate que ya no estamos haciendo llamadas al server sino que tu txt el cual no parseara nada.. por ejemplo si el archivo fuera archivo Servlet este te daría un resultado o un echo de tu codigo entonces Ajax solo llevaría el contenido de este resultado a tu programa…
en corto, Client side i Server side no es lo mismo, Ajax es Client side por lo que debes de parsearlo primero..
espero me aya echo entender
Hola que tal, primero muy útil el scrip, mi problema es no me están funcionando los scripts de las paginas que jala, estuve investigando pero no encuentro una solucion, tienes alguna idea? veras tengo en solo archivo la mayoría de mis funciones que mando llamar pero pero si los llamo una vez obtenida la pagina no funcionan. De antemano Gracias.
Josh, hola gracias por tu comentario..
Ok dices que el documentos que llamas contiene funciones que quieres que sean pasadas en el javascript?
Si es así en el response del ajax, tienes que utilizar el método eval() de javascript, este te ayuda a usar esas funciones en tu pagina, pero eso si estos scripts o funciones tienen que ser de javascript para que funcionen..
gracias
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.
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 jQueryMejor observa las lineas donde llamas a la funcion me parese que estas usando single quotes y tendrias que usar dobles…gracias.