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

[yafuslae]

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.

[emprear]

Iniciado por yafuslae

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:

<section>
<p id="original">contenido original</p>
<p id="nuevo" style="display: none;"><?php include ''x.php'; ?></p>
</section>
 

SAludos

[yafuslae]

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.

[emprear]

Un ejemplo básico de cambio de contenido con ajax

http://foros.emprear.com/ajax/demo/
Saludos

[Rafael]

@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?

[emprear]

Iniciado por Rafael

@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:

if (ajax.readyState==1){
document.getElementById(capa).innerHTML = "<img src='ajax-loader.gif' align='center' /><br /> Aguarde por favor...";
}
 

el famoso gif de cargando
Luego

Código Javascript:

if (ajax.readyState == 4){ 
 if(ajax.status == 200) {
document.getElementById(capa).innerHTML =
ajax.responseText;
}
}
 

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

[Rafael]

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

SÍ, SÏ, Máaaaaaaaas, ¡máaaaaaas!

Zip descargado. Tipo estudiando.

[emprear]

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

[Rafael]

Ya lo descargué, grazie.

[Rafael]

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

Código HTML:

<a href="#" onclick="cargarAjax('contenido1.html','Contenedor'); return false">1</a>
<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:

<select onchange="cargarAjax.[selectedIndex].value">
 <option value="1.html">
 <option value="2.html">
</select>
 

¿Una ayuda por favor?

[emprear]

Te dejo 2 variantes, con boton y con onchange,

Código HTML:

<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<script type="text/javascript">
function ajaxcombo(id_select, contenedorAjax){
var seleccion=document.getElementById? document.getElementById(id_select) : ""
if (seleccion!="" && seleccion.options[seleccion.selectedIndex].value!="")
cargarAjax(seleccion.options[seleccion.selectedIndex].value +'-'+ contenedorAjax)
}
</script>
 
<form>
<select id="ajaxmenu_uno" size="1">
<option value="pag1.htm">Página 1</option>
<option value="pag2.htm">Página 2</option>
<option value="otracarpeta/pag3.htm">Página 3</option>
</select>
<input type="button" onClick="ajaxcombo('ajaxmenu_uno', 'carga')" value="Cargar" />
</form>
 
<div id="carga"></div>
 
<hr />
 
 
<form>
<select id="ajaxmenu_dos" size="1" onchange="ajaxcombo('ajaxmenu_dos', 'cargar_dos');">
<option value="">Seleccionar</option>
<option value="pag1.htm">Página 1</option>
<option value="pag2.htm">Página 2</option>
<option value="otracarpeta/pag3.htm">Página 3</option>
</select>
</form>
 
<div id="carga_dos"></div>
</body>
</html>
 

Saludos

[Rafael]

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?

[quike88]

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.

[emprear]

Iniciado por Rafael

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

[Rafael]

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?

[emprear]

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

Saludos

[Rafael]

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