Anónimo
Página con parte estática y otra variable
A ver si me puedes echar una mano...
La cuestión es que estoy haciendo una página, de formato clásico (menú izquierda, cabecera y contenido central) que seguramente sea algo extensa y lo que quiero es cambiar exclusivamente el contenido central de la página haciendo que el menú y la cabecera queden de forma constante, es decir, que no se "recarguen" todos los contenidos de la página, solamente el contenido principal.
He probado a hacerlo con php, pero se "recarga" toda la página. Lo he hecho como viene en este enlace.
http://www.desarrolloweb.com/articulos/2472.php
¿Podrías decirme cual es la forma de hacerlo? ¿Con php es posible?
La cuestión es que estoy haciendo una página, de formato clásico (menú izquierda, cabecera y contenido central) que seguramente sea algo extensa y lo que quiero es cambiar exclusivamente el contenido central de la página haciendo que el menú y la cabecera queden de forma constante, es decir, que no se "recarguen" todos los contenidos de la página, solamente el contenido principal.
He probado a hacerlo con php, pero se "recarga" toda la página. Lo he hecho como viene en este enlace.
http://www.desarrolloweb.com/articulos/2472.php
¿Podrías decirme cual es la forma de hacerlo? ¿Con php es posible?
2 Respuestas
Respuesta de Chari Saiz
1
Lo que tú quieres hacer no puedes hacerlo sólo con php.
Tienes, así a grosso modo, dos opciones. Una es utilizar frames de html (que es algo bastante obsoleto y que te recomendaría evitar) y otra es actualizar la parte que quieres con javascript.
La segunda manera a la que me refiero, es (más o menos) esto:
http://www.desarrolloweb.com/articulos/ajax-prototype.html
Tendrías que tener la parte que quieres actualizar dentro de una capa, que sería la que referencias al hacer el ajax. Updater.
Si te suena a chino, no te preocupes, que es más fácil de lo que parece y para eso estamos ;)
Tienes, así a grosso modo, dos opciones. Una es utilizar frames de html (que es algo bastante obsoleto y que te recomendaría evitar) y otra es actualizar la parte que quieres con javascript.
La segunda manera a la que me refiero, es (más o menos) esto:
http://www.desarrolloweb.com/articulos/ajax-prototype.html
Tendrías que tener la parte que quieres actualizar dentro de una capa, que sería la que referencias al hacer el ajax. Updater.
Si te suena a chino, no te preocupes, que es más fácil de lo que parece y para eso estamos ;)
Siiiii, muchas gracias. Al final lo he hecho con jquery ya que en la página tengo un menú con él. Aún así, necesito hacer eso mismo pero con varios botones que están en el mismo menú. Te dejo el código para que te hagas una idea. Por cierto, no se como va esto, pero si quieres finalizo esta pregunta, te voto y vuelvo a pedirte ayuda... Muchas gracias, me estaba volviendo loco... el código:
<html>
<head>
<title>Ajax Simple</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("prueba01.html");
});
})
</script>
</head>
<body>
<a href="#" id="enlaceajax">boton 01</a>
<a href="#">boton 02</a>
<a href="#">boton 03</a>
<a href="#">boton 04</a>
<br>
<div id="destino"></div>
</body>
</html>
<html>
<head>
<title>Ajax Simple</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("prueba01.html");
});
})
</script>
</head>
<body>
<a href="#" id="enlaceajax">boton 01</a>
<a href="#">boton 02</a>
<a href="#">boton 03</a>
<a href="#">boton 04</a>
<br>
<div id="destino"></div>
</body>
</html>
En teoría está bien, ¿no? ¿Te funciona?
Si, me funciona pero solo un enlace... lo que no sé es como hacerlo para hacer un link diferente a cada enlace. ¿Cómo lo haría? ¿Sería repitiendo 4 veces (los botones que tengo) el código con diferentes variables o habría otra forma?
Gracias
Gracias
Te voy a sugerir una manera muy parecida.
Coloca todos los enlaces dentro de una capa con identificador, no hace falta que tengan clases o ids los enlaces, pero sí el href definido:
<div id="cajaenlaces">
<a href="pagina1.html">boton 01</a>
<a href="pagina2.html">boton 02</a>
<a href="pagina3.html">boton 03</a>
<a href="pagina4.html">boton 04</a>
</div>
Y cambias:
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("prueba01.html");
});
})
</script>
Por esto otro:
<script type="text/javascript">
$(document).ready(function(){
$("#cajaenlaces a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(){
$("#destino").load(href);
});
});
});
</script>
Lo único que deberías hacer, es sustituir los destinos que te he puesto de ejemplo por los que se corresponden con tus páginas y en un principio, con eso te debería funcionar...
¿Lo pruebas y me dices?
Coloca todos los enlaces dentro de una capa con identificador, no hace falta que tengan clases o ids los enlaces, pero sí el href definido:
<div id="cajaenlaces">
<a href="pagina1.html">boton 01</a>
<a href="pagina2.html">boton 02</a>
<a href="pagina3.html">boton 03</a>
<a href="pagina4.html">boton 04</a>
</div>
Y cambias:
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("prueba01.html");
});
})
</script>
Por esto otro:
<script type="text/javascript">
$(document).ready(function(){
$("#cajaenlaces a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(){
$("#destino").load(href);
});
});
});
</script>
Lo único que deberías hacer, es sustituir los destinos que te he puesto de ejemplo por los que se corresponden con tus páginas y en un principio, con eso te debería funcionar...
¿Lo pruebas y me dices?
Respuesta de rotsen_
1
Contesto primero a la segunda pregunta. No, php es una tecnología de servidor y no puede hacer (por sí solo) que el navegador recargue sólo una parte de la página.
Para la primera pregunta hay varias soluciones, pero sería demasiado extenso ponerlas completas aquí, así que te indico por donde empezar esperando que alguna te sea de utilidad.
Solución 1 (Más sencilla): Frames
Utiliza frames para dividir tu página, de este modo, la cabecera iría en un frame, el menú en otro y el contenido central en otro. Mediante frames puedes conseguir que el navegador sólo recargue el frame que sea necesario. A partir de esta url puedes encontrar ejemplos:
http://www.wikilearning.com/tutorial/completo_tutorial_de_html/4465-29
Solución 2 (Más compleja, más moderna): AJAX
Utilizando el objeto Javascript puedes hacer que el navegador conecte al servidor, obtenga los datos que necesita y los coloque en el lugar que te interese. En esta URL puedes encontrar un mini tutorial sobre el tema:
http://sofanaranja.com/2005/08/24/mini-tutorial-de-ajax/
Para la primera pregunta hay varias soluciones, pero sería demasiado extenso ponerlas completas aquí, así que te indico por donde empezar esperando que alguna te sea de utilidad.
Solución 1 (Más sencilla): Frames
Utiliza frames para dividir tu página, de este modo, la cabecera iría en un frame, el menú en otro y el contenido central en otro. Mediante frames puedes conseguir que el navegador sólo recargue el frame que sea necesario. A partir de esta url puedes encontrar ejemplos:
http://www.wikilearning.com/tutorial/completo_tutorial_de_html/4465-29
Solución 2 (Más compleja, más moderna): AJAX
Utilizando el objeto Javascript puedes hacer que el navegador conecte al servidor, obtenga los datos que necesita y los coloque en el lugar que te interese. En esta URL puedes encontrar un mini tutorial sobre el tema:
http://sofanaranja.com/2005/08/24/mini-tutorial-de-ajax/