Foros del Web » Programando para Internet » Jquery »

Heredar estilos con Jquery Ajax

Estas en el tema de Heredar estilos con Jquery Ajax en el foro de Jquery en Foros del Web. Saludos, Mi idea es crear una especie de portfolio fotográfico. Para ello he diseñado una página que tiene los siguientes DIV: - header - cargando ...
  #1 (permalink)  
Antiguo 08/03/2010, 19:39
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 5 meses
Puntos: 1
Heredar estilos con Jquery Ajax

Saludos,

Mi idea es crear una especie de portfolio fotográfico. Para ello he diseñado una página que tiene los siguientes DIV:

- header
- cargando
- contenedor_fotos
- menu
-footer

En el menú inserto unos links que cargan dinámicamente archivos html externos, mediante:

Código HTML:
<ul><a href="#" onclick="cargar_dinamico2('#contenedor_fotos','galeria1.html');">Galeria1</a></ul> 
Que utiliza la función:
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.         function cargar_dinamico2(elemento,archivo){
  3.         $("#cargando").css("display", "inline");
  4.         $(elemento).load(archivo, function(){
  5.         $("#cargando").css("display", "none");
  6.         });
  7.         $(elemento).fadeIn(3000);
  8.         }
  9.         </script>

Esta función simplemente carga el archivo HTML mediante Ajax usando Jquery. Mientras lo carga muestra el mensaje "cargando" en el DIV destinado a ello, y posteriormente el contenido de mi archivo HTML.

Hasta ahí todo perfecto... Me carga, texto, imágenes, etc...

Pero el problema llega cuando muestro una galería que utiliza Jquery en el archivo externo. Entonces no me carga los efectos ni nada.

Si la pongo en el index.html o visito mi galeria1.html funciona perfectamente, pero al cargarla mediante AJAX pierde toda funcionalidad.

He leído que puede ser algo parecido a que todo el DOM está cargado y los elementos que carga mediante AJAX no se muestran con el estilo por eso.

La galería que utilizo es esta: http://www.gcmingati.net/wordpress/w...de-plugin.html

¿Alguna sugerencia de por donde empezar?
  #2 (permalink)  
Antiguo 09/03/2010, 07:57
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Respuesta: Heredar estilos con Jquery Ajax

Para este caso jQuery tiene el método live(), el cual usa "event delegation". Me imagino que llamas a la función con algún tipo de evento (click, por ejemplo). Puedes usar live() de la misma forma que usas bind().
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #3 (permalink)  
Antiguo 09/03/2010, 08:33
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Heredar estilos con Jquery Ajax

No utilizo el evento click de Jquery. Simplente llamo a la función desde el link así:
Código HTML:
Ver original
  1. <ul><a href="#" onclick="cargar_dinamico2('#contenedor_fotos','galeria1.html');">Galeria1</a></ul>

¿Cómo puedo utilizar live()? Utilizo el código que pego en el primer post...nada más...

Gracias.
  #4 (permalink)  
Antiguo 09/03/2010, 09:07
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Heredar estilos con Jquery Ajax

Usa get.script para traer la galería (js). Y load para el resto.

http://api.jquery.com/jQuery.getScript/
Cita:
function cargar_dinamico2(elemento,archivo){
$("#cargando").css("display", "inline");


$.getScript('ajax/galeria.js', function() {

$(elemento).load(archivo, function(){ $("#cargando").css("display", "none"); });

});

$(elemento).fadeIn(3000);
}
  #5 (permalink)  
Antiguo 09/03/2010, 09:10
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Heredar estilos con Jquery Ajax

coloca un identificar al link, por ejemplo "cargaGaleria"
Código HTML:
<a href="#" id="cargaGaleria">Galeria1</a> 

y en el código jquery
Código HTML:
$("#cargaGaleria").live('click', function(){

        $("#cargando").css("display", "inline");
        $(elemento).load(archivo, function(){
        $("#cargando").css("display", "none");
        });
        $(elemento).fadeIn(3000);

});
  #6 (permalink)  
Antiguo 09/03/2010, 09:27
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Heredar estilos con Jquery Ajax

La otra que se me ocurrió es que si tenes algo así en tu segunda pagina, el link se relativice al cargarla con ajax. Chequeaste las rutas relativas?

<script src="libreria/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
  #7 (permalink)  
Antiguo 09/03/2010, 09:28
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Heredar estilos con Jquery Ajax

Cita:
Iniciado por mayid Ver Mensaje
La otra que se me ocurrió es que si tenes algo así en tu segunda pagina, el link se relativice al cargarla con ajax. Chequeaste las rutas relativas?

<script src="libreria/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
No me sale con ninguna de las soluciones propuestas, voy a colgarlo en un server de pruebas a ver si me podéis echar una mano...
  #8 (permalink)  
Antiguo 09/03/2010, 09:40
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Heredar estilos con Jquery Ajax

Lo he colgado aquí: http://www.hectorgarrofe.com/pol

Aquí está online para que podáis ver como se ve la página, de todas manera he subido los archivos en un RAR para que podáis ver el código fuente un poco mejor aquí: http://www.hectorgarrofe.com/pol/hinfra.rar

Como podéis ver, en la página principal me carga perfectamente la galería, pero al cargarle mediante AJAX en un enlace la cosa deja de funcionar.

El código me ha quedado un poco desordenado al agregarle vuestras dos sugerencias.

El link MAYID apunta a la función que mayid me ha sugerido, i el link DANY_S a la solución que dany_s me ha sugerido.

Ninguna de las dos me funciona... A ver si me podéis echar una mano.

¡Muchas gracias por adelantado!
  #9 (permalink)  
Antiguo 09/03/2010, 10:30
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Heredar estilos con Jquery Ajax

hay muchos errores pero lo que hice fue
sacar el evento onclic del link DANY_S y usar el evento clic de jquery.
Cuando se completa la carga volvi a iniciar el slideView

esto
Código HTML:
		function cargar_dinamico_Dany_s(elemento,archivo){
		$("#cargaGaleria").live('click', function(){
        $("#cargando").css("display", "inline");
        $(elemento).load(archivo, function(){
        $("#cargando").css("display", "none");
        });
        $(elemento).fadeIn(3000);
		});
por esto
Código HTML:
		$().ready( function (){
			$("#cargaGaleria").click( function (){
				$("#cargando").css("display", "inline");

				$("#contenedor_fotos").load('galeria1.html', function(){ $("#cargando").css("display", "none"); $("div#the_beauty_of_abandoned_fotos").slideView() });

				$("#contenedor_fotos").fadeIn(3000);
			});
		});

y me queda asi


Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- METATAGS -->
<meta name="Title" content="Pol Viladmos Photography" />
<meta name="Subject" content="Photography" />
<meta name="Description" content="Photography album of Pol Viladoms photographer" />
<meta name="Keywords" content="pol, viladoms, pol viladoms, photography, barcelona" />
<meta name="Language" content="Spanish" />
<meta name="Revisit" content="15 days" />
<meta name="Distribution" content="Global" />
<meta name="Robots" content="All" />

<title>Pol Viladoms Photography</title>

		<!--CSS de la página-->
		<link href="./css/style.css" rel="stylesheet" type="text/css" />


		<!--Scripts del proyecto-->
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="http://www.hectorgarrofe.com/pol/js/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="http://www.hectorgarrofe.com/pol/js/jquery.slideviewer.1.2.js" type="text/javascript"></script> 

		
		
		<!--INICIO función para mostar/ocultar div SELECCION DE DIVS-->
		<script type="text/javascript">
			function muestra_oculta(id)
			{
				if (document.getElementById) //se obtiene el id
				{
				var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
				el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
				}
			}
		window.onload = function() //hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente
		{
			muestra_oculta('msup_the_beauty_of_abandoned'); //etiqueta DIV que deseamos mostrar
		}
		</script>
		<!--FIN función para mostar/ocultar div-->
		
		
		<!--INICIO función para mostar/ocultar div2 EFECTOS-->
		<script type="text/javascript">
			function aparece(id)
			{
				$(id).fadeIn(1500);
				
			}
			function desaparece(id)
			{
				$(id).fadeOut(1500);				
			}
		</script>
		<!--FIN función para mostar/ocultar div2-->
		
		<!--Función para mostar contenido dinámico 2 POR HINFRA-->
		<script type="text/javascript">
		function cargar_dinamico2(elemento,archivo){
		$(elemento).fadeOut(0);
		$("#cargando").css("display", "inline");
		$(elemento).load(archivo, function(){
		$("#cargando").css("display", "none");
		});
		$(elemento).fadeIn(3000);
		}
		</script>
		<!--FIN Función para mostar contenido dinámico 2 POR HINFRA-->
		
		<!--Función para mostar contenido dinámico 2 POR MAYID-->
		<script type="text/javascript">
		function cargar_dinamico_mayid(elemento,archivo){
		$("#cargando").css("display", "inline");
		$.getScript('js/jquery.slideviewer.1.2.js', function() {
		$(elemento).load(archivo, function(){ $("#cargando").css("display", "none"); });
		});
		$(elemento).fadeIn(3000);
		}
		</script>
		<!--FIN Función para mostar contenido dinámico 2 POR MAYID-->
		
		<!--Función para mostar contenido dinámico 2 POR DANY_S-->
		<script type="text/javascript">
		
		$().ready( function (){
			$("#cargaGaleria").click( function (){
				$("#cargando").css("display", "inline");

				$("#contenedor_fotos").load('galeria1.html', function(){ $("#cargando").css("display", "none"); $("div#the_beauty_of_abandoned_fotos").slideView() });

				$("#contenedor_fotos").fadeIn(3000);
			});
		});
		</script>
		<!--FIN Función para mostar contenido dinámico 2 POR DANY_S-->
		
		<script type="text/javascript">
		$(window).bind("load", 
		function() {
			$("div#the_beauty_of_abandoned_fotos").slideView() 
			});
		</script>
		
</head>


<body>

	<div id="wrapper">
	
	<div id="cargando" style="display:none; color: green;">Cargando...</div>
			
		<div id="header">
		
			<div id="logo"><img src="img/logo.png" alt="Pol Viladoms"></div>
		
		
			<div id="msup_the_beauty_of_abandoned">
			THE BEAUTY OF ABANDONED <small><a href="#" onclick="desaparece('#the_beauty_of_abandoned_contenedor');">ACUATIC PARK</a> - <a href="#" onclick="aparece('#the_beauty_of_abandoned_contenedor');">ACUATIC PARK II</a> - ACUATIC III - PLEAMAR</small>
			</div>
		</div>


		
		<div id="contenedor_fotos">
		
		<div id="the_beauty_of_abandoned_contenedor">
		

		
		<div id="the_beauty_of_abandoned_fotos" class="svw">
			<ul>
				<li><img width="950" height="300" alt="abc defrg thysu ooip jkifbtg fff" src="fotos/1.jpg" /></li>
				<li><img width="950" height="300" alt="abc defrg thysu ooip jkifbtg fff" src="fotos/2.jpg" /></li>
				<li><img width="950" height="300" alt="abc defrg thysu ooip jkifbtg fff" src="fotos/3.jpg" /></li>
				<li><img width="950" height="300" alt="abc defrg thysu ooip jkifbtg fff" src="fotos/4.jpg" /></li>
			</ul>
		</div>
		
		</div>
		
		</div>
		

		
		
		<div id="footer">
			<div id="menu_inferior_inicial">
			
				<li>
					<ul><a href="#" onclick="aparece('#msup_the_beauty_of_abandoned');">THE BEAUTY OF ABANDONED</a></ul>
					<ul><a href="#" onclick="cargar_dinamico_mayid('#contenedor_fotos','galeria1.html');">MAYID</a></ul>
					<ul><a href="#" id="cargaGaleria">DANY_S</a></ul>
					<ul><a href="http://www.google.com">WIDELUX WORLD</a></ul>
					<ul><a href="http://www.google.com">BARCELONA SKYLINES</a></ul>
					<ul><a href="http://www.google.com">ARCHITECTURE</a></ul>
					<ul><a href="http://www.google.com">UNDERWATER PORTRAITS</a></ul>
					<ul><a href="http://www.google.com">A TYPOGRAPHY</a></ul>
				</li>
			</div>
		</div>
		
	
	</div>




</body>
</html> 

Última edición por Dany_s; 09/03/2010 a las 10:37
  #10 (permalink)  
Antiguo 09/03/2010, 10:40
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Heredar estilos con Jquery Ajax

Cita:
$(window).bind("load",
function() {
$("div#the_beauty_of_abandoned_fotos").slideView ()
});
Mi ejemplo no va a funcionar porque estás intendando cargar la galería dos veces. Una en la pagina principal, otra con get.script.
  #11 (permalink)  
Antiguo 09/03/2010, 10:41
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Heredar estilos con Jquery Ajax

Muchas gracias Dany_s así funciona bien.

¿Podrías explicarme cual era mi error? Así aprendo, que en realidad es lo que quiero...

Y otra cosa... Si deseo cargar unos 80 archivos HTML mediante AJAX, no puede ser que en el index tenga que crear una función para cada uno de ellos.

Código Javascript:
Ver original
  1. $().ready( function (){
  2.             $("#cargaGaleria").click( function (){
  3.                 $("#cargando").css("display", "inline");
  4.  
  5.                 $("#contenedor_fotos").load('galeria1.html', function(){ $("#cargando").css("display", "none"); $("div#the_beauty_of_abandoned_fotos").slideView() });
  6.  
  7.                 $("#contenedor_fotos").fadeIn(3000);
  8.             });
  9.         });

¿Tengo que crear una función como esta para cada link?

Y luego, esta:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.         $(window).bind("load",
  3.         function() {
  4.             $("div#the_beauty_of_abandoned_fotos").slideView()
  5.             });
  6.         </script>

¿Que es exactamente lo que hace?

Muchas gracias, de veras.
  #12 (permalink)  
Antiguo 09/03/2010, 10:42
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Heredar estilos con Jquery Ajax

Cita:
Iniciado por mayid Ver Mensaje
Mi ejemplo no va a funcionar porque estás intendando cargar la galería dos veces. Una en la pagina principal, otra con get.script.
Eso era solo para probar, yo solo quiero cargarlas mediante AJAX, en el index no tiene que haber ninguna galería.

¿Cómo lo harías sin cargar la galería dos veces?
  #13 (permalink)  
Antiguo 09/03/2010, 10:53
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Respuesta: Heredar estilos con Jquery Ajax

jo, que buenas soluciones. mi consejo iba por donde va Dany_s. haces un target de los enlaces usando jquery y les aplicas un live ("click").
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #14 (permalink)  
Antiguo 09/03/2010, 10:55
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Heredar estilos con Jquery Ajax

Cita:
Iniciado por juaniquillo Ver Mensaje
jo, que buenas soluciones. mi consejo iba por donde va Dany_s. haces un target de los enlaces usando jquery y les aplicas un live ("click").
¿Pero para eso no tendría que escribir mucho código en Jquery?

No lo digo porqué sea perezoso... lo digo porque supongo que habrá una manera más limpia.
  #15 (permalink)  
Antiguo 09/03/2010, 11:09
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Heredar estilos con Jquery Ajax

Ah Dany_s, otra cosa... el fadeIn me ha dejado de funcionar...
  #16 (permalink)  
Antiguo 09/03/2010, 13:40
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Respuesta: Heredar estilos con Jquery Ajax

Cita:
Iniciado por hinfra Ver Mensaje
¿Pero para eso no tendría que escribir mucho código en Jquery?

No lo digo porqué sea perezoso... lo digo porque supongo que habrá una manera más limpia.

El tener onclick inline no se considera "limpio". Esto se debe a que se prefiere la separación del html (contenido, semántica) y javascript (acción).
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #17 (permalink)  
Antiguo 09/03/2010, 16:18
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Heredar estilos con Jquery Ajax

Cita:
¿Pero para eso no tendría que escribir mucho código en Jquery?
No, sería menos código y como dice juaniquillo queda mas limpio

te doy un ejemplo

Código HTML:
<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        #galerias a {display:block}
    </style>
    <script type="text/javascript">
    
    $( function (){
        $('#galerias a').click( function (){
            //Obtengo la url de las galerias
            url = $(this).attr('href');
            alert ("link a "+url);
            /* código llamada ajax
             ...
             */
            return false;
        });
    });
    </script>
    </head>
<body>
    <div id="galerias">
        <a href="galeria1.html">galeria 1</a>
        <a href="galeria2.html">galeria 2</a>
        <a href="galeria3.html">galeria 3</a>
        <a href="galeria4.html">galeria 4</a>
        <a href="galeria5.html">galeria 5</a>
        <a href="galeria6.html">galeria 6</a>
        <a href="galeria7.html">galeria 7</a>
        <a href="galeria8.html">galeria 8</a>
        <a href="galeria9.html">galeria 9</a>
        <a href="galeria10.html">galeria 10</a>
        <a href="galeria11.html">galeria 11</a>
        <a href="galeria12.html">galeria 12</a>
        <a href="galeria13.html">galeria 13</a>
        <a href="galeria14.html">galeria 14</a>
        <a href="galeria15.html">galeria 15</a>
        <a href="galeria16.html">galeria 16</a>
        <a href="galeria17.html">galeria 17</a>
        <a href="galeria18.html">galeria 18</a>
        <a href="galeria19.html">galeria 19</a>
        <a href="galeria20.html">galeria 20</a>
    </div>
</body>
</html> 
Cita:
¿Podrías explicarme cual era mi error?
La funcion me salia que no estaba definida. En el link tenias un evento click con jquery y otro onclick en la etiqueta.


Trata de postear siempre código limpio que esté ordenado porque hay personas que te pueden ayudar pero no van a querer leer el código cuando está todo desordenado jeje

Etiquetas: ajax, estilos, heredar
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 17:47.