Heredar estilos con Jquery Ajax

hinfra · #1 (**permalink**) 08/03/2010, 19:39

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<script type="text/javascript">
        function cargar_dinamico2(elemento,archivo){
        $("#cargando").css("display", "inline");
        $(elemento).load(archivo, function(){
        $("#cargando").css("display", "none");
        });
        $(elemento).fadeIn(3000);
        }
        </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?

juaniquillo · #2 (**permalink**) 09/03/2010, 07:57

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().

hinfra · #3 (**permalink**) 09/03/2010, 08:33

No utilizo el evento click de Jquery. Simplente llamo a la función desde el link así:

Código HTML:

Ver original<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.

mayid · #4 (**permalink**) 09/03/2010, 09:07

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

http://api.jquery.com/jQuery.getScript/

Cita:

Dany_s · #5 (**permalink**) 09/03/2010, 09:10

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);

});

mayid · #6 (**permalink**) 09/03/2010, 09:27

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>

hinfra · #7 (**permalink**) 09/03/2010, 09:28

Cita:

Iniciado por mayid

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...

hinfra · #8 (**permalink**) 09/03/2010, 09:40

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!

Dany_s · #9 (**permalink**) 09/03/2010, 10:30

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>

mayid · #10 (**permalink**) 09/03/2010, 10:40

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.

hinfra · #11 (**permalink**) 09/03/2010, 10:41

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$().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);
            });
        });

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

Y luego, esta:

Código Javascript:

Ver original<script type="text/javascript">
        $(window).bind("load", 
        function() {
            $("div#the_beauty_of_abandoned_fotos").slideView() 
            });
        </script>

¿Que es exactamente lo que hace?

Muchas gracias, de veras.

hinfra · #12 (**permalink**) 09/03/2010, 10:42

Cita:

Iniciado por mayid

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?

juaniquillo · #13 (**permalink**) 09/03/2010, 10:53

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").

hinfra · #14 (**permalink**) 09/03/2010, 10:55

Cita:

Iniciado por juaniquillo

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.

hinfra · #15 (**permalink**) 09/03/2010, 11:09

Ah Dany_s, otra cosa... el fadeIn me ha dejado de funcionar...

juaniquillo · #16 (**permalink**) 09/03/2010, 13:40

Cita:

Iniciado por hinfra

¿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).

Dany_s · #17 (**permalink**) 09/03/2010, 16:18

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