Foros del Web » Creando para Internet » HTML »

¿Como puedo sustituir el contenido de un <section>?

Estas en el tema de ¿Como puedo sustituir el contenido de un <section>? en el foro de HTML en Foros del Web. Hola. La pregunta se refiere a que hay un section en el cual hay contenido, pero me gustaría que al hacer clic en un link ...
  #1 (permalink)  
Antiguo 17/10/2012, 17:50
 
Fecha de Ingreso: octubre-2012
Mensajes: 45
Antigüedad: 11 años, 5 meses
Puntos: 2
Pregunta ¿Como puedo sustituir el contenido de un <section>?

Hola. La pregunta se refiere a que hay un section en el cual hay contenido, pero me gustaría que al hacer clic en un link cualquiera de la web se borrara el contenido del section y se cargase el contenido de una pagina php.
  #2 (permalink)  
Antiguo 18/10/2012, 05:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Cita:
Iniciado por yafuslae Ver Mensaje
Hola. La pregunta se refiere a que hay un section en el cual hay contenido, pero me gustaría que al hacer clic en un link cualquiera de la web se borrara el contenido del section y se cargase el contenido de una pagina php.
Tendrías que utilizar ajax para cargar el nuevo contenido en el <section>ó alternativamente, tener dentro del section ambos contenidos en contenedores diferentes y, con javascript, intercambiar las propiedades del display o visibility

Código HTML:
Ver original
  1. <p id="original">contenido original</p>
  2. <p id="nuevo" style="display: none;"><?php include ''x.php'; ?></p>

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 18/10/2012, 06:21
 
Fecha de Ingreso: octubre-2012
Mensajes: 45
Antigüedad: 11 años, 5 meses
Puntos: 2
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Comprendo el apaño que propones en el código pero dado lo complejo de mi proyecto no me puedo permitir ir añadiendo todo a ese section. Que la idea no es mala pero a la larga es problemática. Ahora mismo llevaba un rato mirando el tema de ajax pero me va a costar por que empecé hace unas 3 semanas con javascript (aun que yo vengo de java) y de momento me sobrepasa.
  #4 (permalink)  
Antiguo 18/10/2012, 18:57
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Un ejemplo básico de cambio de contenido con ajax

http://foros.emprear.com/ajax/demo/
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 22/10/2012, 07:57
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

@Emprear

Con el ejemplito sencillo que pones en tu página demo, me dan ganas de aprender un poco de Ajax. Así que te vas a tener que aguantar a mi lluvia de preguntas.

1) ¿Por qué un requestHeader?
2) ¿Qué son los redyState? ¿Ese núimero 4, varía conforme tienes más elementos en el menú?
3) ¿Qué es el status == 200?
  #6 (permalink)  
Antiguo 22/10/2012, 08:38
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Cita:
Iniciado por Rafael Ver Mensaje
@Emprear

Con el ejemplito sencillo que pones en tu página demo, me dan ganas de aprender un poco de Ajax. Así que te vas a tener que aguantar a mi lluvia de preguntas.

Primero una aclaración, para ese ejempo sencillo se puede hacer con GET. Y pasar un header sería opcional


1) ¿Por qué un requestHeader?
suponiendo que estamos procesando un form con ajax y queremos usar POST, utilizamos el método requestHeader para indicar que los datos están codificados como en un formulario, en este caso
setRequestHeader("Content-Type","application/x-www-form-urlencoded");
se entiende que el recurso requerido se está solicitando por medio del Ajax, por lo tanto los headers deben de enviarse de la misma forma.

la sintáxis es
objetoAjax.setRequestHeader(nombre del header, valor);

2) ¿Qué son los redyState? ¿Ese número 4, varía conforme tienes más elementos en el menú?
No, no se relaciona con los elementos del menu, cuando hacés una petición por Ajax, entre el envío y la respuesta hay diferentes estados, lee esto primero (donde se describen los posibles valores 0,1,2,3,4)
http://librosweb.es/ajax/capitulo7/m...tprequest.html

De ahi que si está en uno, utilizo
Código Javascript:
Ver original
  1. if (ajax.readyState==1){
  2. document.getElementById(capa).innerHTML = "<img src='ajax-loader.gif' align='center' /><br /> Aguarde por favor...";
  3. }
el famoso gif de cargando
Luego

Código Javascript:
Ver original
  1. if (ajax.readyState == 4){
  2.  if(ajax.status == 200) {
  3. document.getElementById(capa).innerHTML =
  4. ajax.responseText;
  5. }
  6. }

Si está en 4, es que el proceso se completó correctamente, pero, también es posible que la página no exista (ya habrás oído del 404 not found), bueno el status 200, indica que la página fue encontrada, este "status" corresponde a una de las cabeceras HTTP del servidor,

Es decir, verifico ambas condiciones

3) ¿Qué es el status == 200?
lo previo

Quizás te interese esto, que es un poco más complejo

http://foros.emprear.com/ajax/html-css-js-ajax/
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 22/10/2012, 09:42
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Cita:
Quizás te interese esto, que es un poco más complejo
SÍ, SÏ, Máaaaaaaaas, ¡máaaaaaas!

Zip descargado. Tipo estudiando.
  #8 (permalink)  
Antiguo 22/10/2012, 10:05
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Te dejo el sql de la tabla ciudades
http://foros.emprear.com/ajax/html-c...s_demo.sql.zip

Si estás empezando Igual siempre es bueno un buen manual/tutorial.
Siempre recomiendo aprender el funcionamiento con javascript puro, luego, si en alguna de tus Webs usas jQuery, podés usar el mismo para utilizar ajax que te simplifica algunas cosas

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 22/10/2012, 11:41
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Ya lo descargué, grazie.
  #10 (permalink)  
Antiguo 11/04/2013, 01:16
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Hola. Sigo experimentando.
En el ejemplo está muy claro cargar el contenido con el link con un evento onclick

Código HTML:
Ver original
  1. <a href="#" onclick="cargarAjax('contenido1.html','Contenedor'); return false">1</a>
  2. <a href="#" onclick="cargarAjax('contenido2.html','Contenedor'); return false">2</a>
Puedo tener varios links así y no hay problema.

Pero estoy experimentando con unsar un select para cargar este contenido. Creo que podría ser algo así, pero evidentemente no funciona.
Código HTML:
Ver original
  1. <select onchange="cargarAjax.[selectedIndex].value">
  2.  <option value="1.html">
  3.  <option value="2.html">

¿Una ayuda por favor?
  #11 (permalink)  
Antiguo 11/04/2013, 05:43
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Te dejo 2 variantes, con boton y con onchange,
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>Html5</title>
  5. <script type="text/javascript">
  6. function ajaxcombo(id_select, contenedorAjax){
  7. var seleccion=document.getElementById? document.getElementById(id_select) : ""
  8. if (seleccion!="" && seleccion.options[seleccion.selectedIndex].value!="")
  9. cargarAjax(seleccion.options[seleccion.selectedIndex].value +'-'+ contenedorAjax)
  10. }
  11. </script>
  12.  
  13. <form>
  14. <select id="ajaxmenu_uno" size="1">
  15. <option value="pag1.htm">Página 1</option>
  16. <option value="pag2.htm">Página 2</option>
  17. <option value="otracarpeta/pag3.htm">Página 3</option>
  18. </select>
  19. <input type="button" onClick="ajaxcombo('ajaxmenu_uno', 'carga')" value="Cargar" />
  20. </form>
  21.  
  22. <div id="carga"></div>
  23.  
  24. <hr />
  25.  
  26.  
  27. <form>
  28. <select id="ajaxmenu_dos" size="1" onchange="ajaxcombo('ajaxmenu_dos', 'cargar_dos');">
  29. <option value="">Seleccionar</option>
  30. <option value="pag1.htm">Página 1</option>
  31. <option value="pag2.htm">Página 2</option>
  32. <option value="otracarpeta/pag3.htm">Página 3</option>
  33. </form>
  34.  
  35. <div id="carga_dos"></div>
  36. </body>
  37. </html>
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #12 (permalink)  
Antiguo 11/04/2013, 16:35
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Gracias Emprear. Estoy estudiando un poco esas nuevas funciones que pusiste.

Logré que funcionara sin la necesidad de una función nueva supliendo esto:

<a href="#" onclick="cargarAjax('contenido2.html','Contenedor' ); return false">2</a>

con esto:

<select onchange="cargarAjax((this.value),'Contenedor');">
<option value="contenido1.html">Pag.1</option>
<option value="contenido2.html">Pag.2</option>
</select>

Me surge una duda más. ¿Por qué el return false?
  #13 (permalink)  
Antiguo 11/04/2013, 16:53
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 7 meses
Puntos: 87
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Rafael,

El return false se usa para cancelar el evento por defecto del enlace, que en este caso sería redireccionar a la misma página.

Un tutorial que me ayudó bastante cuando aprendía AJAX fué este.

Un saludo.
  #14 (permalink)  
Antiguo 11/04/2013, 17:00
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Cita:
Iniciado por Rafael Ver Mensaje
Gracias Emprear. Estoy estudiando un poco esas nuevas funciones que pusiste.

Logré que funcionara sin la necesidad de una función nueva supliendo esto:

<a href="#" onclick="cargarAjax('contenido2.html','Contenedor' ); return false">2</a>

con esto:

<select onchange="cargarAjax((this.value),'Contenedor');">
<option value="contenido1.html">Pag.1</option>
<option value="contenido2.html">Pag.2</option>
</select>

Me surge una duda más. ¿Por qué el return false?
para que el href que conlleva el link no se ejecute.
Acá hay un poco de discusión sobre que es más semántico o no, si poner un <a>, o si poner un span y estilizarlo con css. Pero hay que considerar también la accesibilidad, y si javascript estuviese desactivado, lo correcto sería

Código:
<a href="contenido2.html" onclick="cargarAjax('contenido2.html','Contenedor'); return false">2</a>
Asi el usuario no se pierde de ver el contenido. Pero es medio relativo, si hago una página con Ajax, que habilite javascript.

En cuanto a tu simplificación, si puede ser, pero si usás onchange es preferible agregar un value vacio y hacerlo con la función. Recordá que el onchange solo se ejecuta cuando "hay un cambio", en tu caso, deberías hacer que por defecto se cargue contenido1.html cuando se hace onload de la página, caso contrario, el div contenedor aparecerá vacío y en el combo, seleccionado por defecto, contenido1, en la práctica el cliente entonces para ver el contenido1, primero debería clickear contenido2 y después nuevamente el 1, se entiende. O claro está la otra alternativa, incluir el botón "Cargar"
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #15 (permalink)  
Antiguo 12/04/2013, 04:20
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

quike88, gracias por en enlace, lo voy a estudiar.

Emprear. Tienes razón. De hecho en la implementación que estoy probando es para un formulario, donde la primer pregunta es para definir las siguientes, por lo que tengo un option vacío. Yo creo que voy a iniciar un tema nuevo para profundizar en el tema, y en la sección JavaScript.

Luego pongo el link al tema nuevo aquí. No quería salirme demasiado del punto original.


Un último punto antes de mudarme de tema.
En cuanto a lo semántico.
a) Link con href="#"
b) Span formateado
Otra opción es un input type button con un onclick... ¿Qué tan válido será un botón solitario, incluso fuera de un formulario?

Última edición por Rafael; 12/04/2013 a las 04:34
  #16 (permalink)  
Antiguo 12/04/2013, 06:03
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

html5 admite un input type=button fuera del form, o sencillamente usás
<button></button>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #17 (permalink)  
Antiguo 12/04/2013, 13:25
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿Como puedo sustituir el contenido de un <section>?

Voy a seguir con mis preguntas acá:
http://www.forosdelweb.com/f13/carga...-ajax-1046549/

Última edición por Rafael; 12/04/2013 a las 14:35

Etiquetas: contenido, sustituir
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:15.