Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Cargar HTML desde navegación con botones en un DIV

JavaScript - Cargar HTML desde navegación con botones en un DIV

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Cargar HTML desde navegación con botones en un DIV

Publicado por Beriba (5 intervenciones) el 14/04/2014 17:18:42


Hola, necesito su ayuda:

Estoy buscando una manera de cargar en un div "contenedor", varios html que se irian cargando en el area de contenido cada que se hace click en los botones "anterior" y "siguiente".

Estuve tratando con:
<script type="text/javascript"> $(function(){
$("#contenedor").load("02.html"); });
</script>

y en el body: <div id="contenedor"></div>

Carga bien, pero el problema es que carga solo un html, y los botones no funcionan.

Alguien me podria dar una mano indicandome cómo podria hacer que los botones "anterior" y "siguiente" funcionen, de manera que pueda cargar un html diferente en el div "contenedor" ?

De antemano, muchas gracias por su ayuda !!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cargar HTML desde navegación con botones en un DIV

Publicado por xve (2100 intervenciones) el 14/04/2014 18:47:42
Hola Beriba, para ello, necesitaras de alguna manera, alimentar los botones siguiente y anterior con el nombre de las paginas que desees cargar cada vez que refresques la pagina...

Una manera, es que los botones siguiente y anterior llamaran a una función de js pasando-le como parámetro el nombre de la pagina a cargar.

Por ejemplo algo así:

1
<div onclick="cargarPagina('03.html');">siguiente</div>

y tener la función cargarPagina() con tu código:
1
2
3
4
5
6
<script>
function cargarPagina(pagina)
{
    $("#contenedor").load(pagina);
}
</script>

Espero que te sirva...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Cargar HTML desde navegación con botones en un DIV

Publicado por Beriba (5 intervenciones) el 14/04/2014 19:02:15
Gracias xve por tu respuesta, solo tengo un par de dudas:

En este caso hay una sola pagina que tiene el div #contenedor y la idea es que las otras paginas se carguen mediante los botones "anterior" y "siguiente".

Las dudas son:
1. ¿Tendría que hacer el código (funcion), tantas veces como HTML externos necesite cargar, correcto?
1
2
3
4
5
<script>
function uno(01.html) { $("#contenedor").load(01.html); }
function dos(02.html) { $("#contenedor").load(02.html); }
function tres(03.html) { $("#contenedor").load(03.html); }
</script>

Algo así estaría bien?


2. ¿El código lo pegaría en el <head> del html principal, donde está el #contenedor?

3. ¿Los botones "anterior" y "siguiente" van en la pagina principal?, o deberían ir dentro de cada una de las paginas que se invocan?
1
2
<div onclick="uno('01.html');">anterior</div>
<div onclick="dos('02.html');">siguiente</div>

Muchas gracias por la ayuda que me puedas prestar con esto.
Saludos !!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cargar HTML desde navegación con botones en un DIV

Publicado por Beriba (5 intervenciones) el 14/04/2014 19:57:48
Hola de nuevo xve, ya logré hacerlo como lo indicaste... omite el mensaje que envié anteriormente. Funcionó al 100% con el código que sugeriste. Muchas gracias.

Quisiera saber si hay alguna posibilidad de que en la barra de direccion, la URL salga con un identificador (para saber en cual pagina estoy parado), es decir, ahora mismo se muestra: www.nombredemiproyecto.com/index.html

Pero quisiera que se puedira ver algo asi: www.nombredemiproyecto.com/index.html#pagina1

Sería posible?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cargar HTML desde navegación con botones en un DIV

Publicado por xve (2100 intervenciones) el 14/04/2014 21:54:18
La url no la puedes cambiar, ya que estas utilizando ajax... para cambiar la url del navegador, tienes que volver al sistema tradicional de refrescar toda la pagina.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cargar HTML desde navegación con botones en un DIV

Publicado por Beriba (5 intervenciones) el 14/04/2014 22:01:07
Comprendido xve, de nuevo gracias por compartir tus conocimientos.

Espero que esta informacion le sea de utilidad a alguien mas, así como me ha ayudado a mi !!!


Salu2 !
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cargar HTML desde navegación con botones en un DIV

Publicado por Beriba (5 intervenciones) el 24/04/2014 01:59:45
Hola xve, al parecer tengo problemas con el codigo que mencionas en Chrome, en Mozilla Firefox funciona bien, pero al momento de probarlo en Chrome simplemente no carga.

Sabes si depronto hay que agregar algo adicional para que funcione bien en Chrome?

Espero me puedas ayudar.

Saludos !!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cargar HTML desde navegación con botones en un DIV

Publicado por OSVALDO (2 intervenciones) el 04/08/2017 00:19:22
Hola, yo estoy entrampado con lo mismo, pero no entendí la solución que diste, por falta de conocimientos claro. Me podrías explicar con un poco mas de detalle si es posible?. Gracias XVE
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar