duda sobre load

starpatrick · #1 (**permalink**) 14/05/2013, 22:00

saludos compañeros, soy nuevo en el foro y estoy dando mis primeros pasos con jquery, solo que tengo una pequeña (no, mejor gran) duda sobre load, les explico.

tengo una pagina web, el index, que carga hojas de estilo y scripts de jquery, al dar click en un div, voy al script y hago ciertas funciones y cargo otra pagina web con load; $("#contenido").load("productos.html")

si me carga la pagina, el problema es que NO me formatea el texto ni me funcionan los scripts.

mi pregunta es: al cargar una pagina con load, se borran los CSS y SCRIPTS que cargo en el index?, los tengo que cargar en "productos.html"?

lo intente con iframes tambien, pero me da el mismo resultado (sin formato y sin scripts)

gracias por su tiempo

diurno10 · #2 (**permalink**) 15/05/2013, 07:29

NO, si estan cargados en el index deberia de funcionar tanto scrips como estilos, tenes una version online de lo q estas haciendo?

starpatrick · #3 (**permalink**) 15/05/2013, 12:09

saludos diurno10

no tengo una version en linea, pero te dejo una version comprimida de lo que estoy haciendo:

el index:

Código:

<?xml version="1.0" encoding="UTF-8"?>
<!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="en" lang="en">
<head>
	
	<title>Prueba de load</title>
	
	<link rel="stylesheet" type="text/css" href="estilo.css" />
	
	<script language="javascript" src="jquery-2.0.0.min.js"></script>
	<script language="javascript" src="rutinas.js"></script>
</head>

<body>
<div id="contenido">
	<h1>Esta pagina muestra el funcionamiento de load</h1>
	<div class="texto">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />&nbsp;<br />
		<span class="enlace">Click aqui para cargar pagina</span>
	</div>
	<div id="cargapagina"></div>
</div>	
</body>
</html>

la pagina que cargo con load:

Código:

<h2>Esta es la pagina cargada con LOAD</h2>
<div class="texto1">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt t labore et dolore magna aliqua.<br />&nbsp;<br />
	<span class="regresa">Click aqui para regresar</span>
</div>
<h2>Este es el fin de la pagina con LOAD</h2>

el CSS:

Código:

h1{
	text-align: center;
	color: #FF0000;
}

h2{
	text-align: center;
	color:#0000FF;
}

#contenido{
	width: 100%;
	font-family: sans-serif;
}

.texto{
	color: #0000FF;
}

.texto1{
	color: #FF0000;
}

.enlace{
	font-size: 1.2em;
	font-weight: bold;
	color: #00FF00;
	cursor: pointer;
}

.regresa{
	font-size: 1.2em;
	font-weight: bold;
	color: #0000FF;
	cursor: pointer;
}

el JQUERY:

Código:

$(function() {
	$(".enlace").click(function(){
		$(".texto").fadeOut(1500,function(){
			$("#cargapagina").load("pagina.html");
		});
	});

	$(".regresa").click(function(){
		alert("Aqui supuestamente hace algo, pero no lo hace, GRRRR!");
	});
});

con este codigo si me funciona el CSS, pero no el jquery.

gracias por tu ayuda diurno10.

diurno10 · #4 (**permalink**) 15/05/2013, 17:44

te comento que con css no tube problema, tomo bien los estilos, en cuanto al codigo jQuery te falto utilizar el metodo live, es decir cuando cargas un pedazo de pagina por ajax, el DOM no sabe que este existe por lo tanto live te ayuda con eso, bueno te dejo mi ej.

Código:

$(".regresa").live('click',function(){
		$(".texto").fadeIn(1500,function(){
			$("#cargapagina").html('');
		});
	});

starpatrick · #5 (**permalink**) 15/05/2013, 18:08

diurno10 muchas gracias por responder y sobre todo por la pequeña, pero entendible explicacion, en pocas palabras lo explicaste muy bien.