refrescar div en php
Refrescar página
en PHP
La presente entrada tiene
como objetivo explicar cómo se realiza el proceso de cargar una página dentro
de otra, esto sirve cuando se quiere actualizar solo una parte de la página sin
necesidad de actualizar todo el contenido. Para ello es necesario contar con un
servidor web y alojar los archivos en el servidor, por lo que se creó una
carpeta llamada RefrescarDiv, y en
su interior dos archivos llamados index.php y paginaActualizada.php.
1. Creamos una página php llamado index.php.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Página principal</title>
</head>
<body>
</body>
</html>
2. Después de la etiqueta title escribimos
el siguiente script.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function
cambiarcont(pagina) {
$("#contenido").load(pagina);
}
</script>
3. Entre las etiquetas <body> </body>
se creara un div.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Pagina principal</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function
cambiarcont(pagina) {
$("#contenido").load(pagina);
}
</script>
</head>
<body>
<div
id="contenido"></div>
</body>
</html>
4. Se aplica estilo al div para ello justo
debajo de la etiqueta </script> pegamos el siguiente código:
<style type="text/css">
#contenido {
position:
absolute;
width:
200px;
height:
115px;
z-index: 1;
left:
154px;
top: 58px;
}
</style>
5. A continuación creamos la referencia que
enlazara a la página que deseamos actualizar para ello escribimos el siguiente código
debajo de la etiqueta div.
<a
href="javascript:cambiarcont('paginaActualizada.html');">Cambia a
otra página</a>
6. El código finalmente debio haber quedado
de la siguiente manera:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Pagina principal</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function
cambiarcont(pagina) {
$("#contenido").load(pagina);
}
</script>
<style type="text/css">
#contenido {
position:
absolute;
width:
649px;
height:
400px;
z-index:
1;
left:
100px;
top:
50px;
}
</style>
</head>
<body>
<div id="contenido"></div>
<a
href="javascript:cambiarcont('paginaActualizada.php');">Cambia a
otra página</a>
</body>
</html>
7. Para la página a la cual se va a
referenciar crearemos otro archivo llamado paginaActualizada.php y llevara el
siguiente código:
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página actualizada</title>
</head>
<body>
<h1>Soy la página que se actualizo</h1>
<p>Solo estoy cargando el contenido dentro del div lo demás quedo igual</p>
</body>
</html>
Finalmente el resultado final es el siguiente:
Al hacer clic
Elaboro: Rafael Santiago Cruz.
Descargar ejemplo
Muchas gracias!!
ResponderBorrar