Navegar entre DIV con Javascript

jogissa · #1 (**permalink**) 06/12/2007, 15:11

Hola a todos,

Hace nada que descubrí CSS y pienso que me vendría genial para lo que estoy intentando hacer. A saber, una página web con header, dos columnas con información y un pie de página con un botón.

El usuario al darle al botón debería visualizar en ambas columnas una serie de datos que van variando dinámicamente con el tiempo (el usuario sólo da una vez al botón). Concretamente, en una columna se van viendo fotos, una a una, que van cambiando cada Xsegundos, por ejemplo.

Lo que es la presentación ya la he hecho, con las columnas y tal, el problema es que cuando le doy al botón, éste llama a una función Javascript situada entre los <head> y ahí es donde NO SE como referenciar a los div columna situados entre los <body> para cambiar su contenido.

Igual es una chorrada de pregunta, pero no la he visto en el faq del foro, y necesito hacerlo. Cualquier comentario será de mucha ayuda.

Gracias!

aloqui · #2 (**permalink**) 06/12/2007, 15:49

Primero, Tienes que definir el div a buscar con un atributo id.
Ejemplo <div id="div1"> ...

Luego lo localizas con javascript con la funcion: document.getElementById
Ejemplo: var myDiv = document.getElementById( "div1" );

Y por ultimo le pones el contenido que quieras. Lo ideal sería mediante funciones DOM, pero puedes poner directamente el código HTML mediante innerHTML
Ejemplo: myDiv.innerHTML = "<b>Esto es una prueba</b>";

jogissa · #3 (**permalink**) 06/12/2007, 17:21

Muchas gracias aloqui!! Va perfectamente (al menos hasta que empiece a complicar las cosas, jeje).

Un saludo!

Edito: Pues ha sido comprobar que eso funciona y darme cuenta que otra cosa que había pensado no lo hace

A ver, se supone que a la página que he mencionado antes se la llama desde otra, "index.jsp" en la que hay el siguiente formulario:

<form action="Pagina_antes_descrita.html" method="POST">
<select align=center name="Ruta">
<option value="0">0) Ninguna</option>
...
</select>
<input type="submit" value="submit">

Entonces quiero recoger el valor de ese select desde mi página, pero no lo he conseguido, porque haciendo:

<script language="javascript" type="text/javascript">
var ruta = request.getParameter("Ruta").toString();
function iniciar(){
var derecha = document.getElementById( "derecha" );
var texto = "Ha seleccionado la ruta"+ruta;
derecha.innerHTML = texto;

}
</script>

Al llamar a la función iniciar() se ve por pantalla "Ha seleccionado la ruta undefined", como si el request.getParameter no funcionara

. Alguna solución?

Gracias de antemano

aloqui · #4 (**permalink**) 07/12/2007, 05:32

Yo lo que haría es lo siguiente:
Hacer que la "Pagina_antes_descrita.html" se genere dinámicamente en el servidor. Con ASP, PERL o lo que tengas. El script debe recibir (mediante POST) un parámetro con la "ruta". Pues bien debe poner dicho parámetro en algún lugar de la página .html generada para que despues el javascript de dicha página lo pueda usar.
Una forma en que puede ponerlo es directamente en una variable javascript ya lista para ser usada:
Ejemplo:
<script type="text/javascript">
var miRuta = "aqui rellenas el valor recibido en el parametro ruta en el POST";
</script>

jogissa · #5 (**permalink**) 07/12/2007, 06:54

No me entero de nada...

A ver, si hago la página en .htm el script el Javascript no me reconoce el request.getparameter

Si la hago .jsp, el código en jsp sí me reconoce el request.getparameter, pero no me reconoce el "var derecha = document.getElementById( "derecha" );" que es de Javascript, y a su vez el código Javascript no me reconoce la variable ruta asignada entre <% %> Toy hecho ya un lio

Vuelvo a editar: Nada, ya lo he solucionado, al final era:

<% String ruta = request.getParameter("Ruta").toString();%>
function iniciar(){
var derecha = document.getElementById( "derecha" );
var ruta = "<%=ruta%>";
var texto = "Ha seleccionado la ruta " + ruta;
derecha.innerHTML = texto;

}

Por si a alguien le sirve. Gracias a aloqui de nuevo por responderme tan pronto las dos veces. Saludos a todos los foreros!

JavierB · #6 (**permalink**) 07/12/2007, 12:29

Movido al foro de JavaScript desde Css.

Saludos,