Cargar una capa dentro de otra

chi_flao · #1 (**permalink**) 10/12/2009, 03:25

Hola amigos, tengo un problema.

Resulta que tengo una pagina index con este código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript" src="../js/cargarPagina.js"></script>
</head>
<body>

 <a href="javascript:TraerPagina('calendario.html','calendario');">Alumnos</a>
 <div id="calendario"></div>
 
</script>

</body>
</html>

el archivo cargarPagina.js es este

Código:

function getXMLHttpRequest(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

function TraerPagina(datos,contenedor){
	divResultado = document.getElementById(contenedor);
	ajax=getXMLHttpRequest();
	ajax.open("GET", datos);
	ajax.onreadystatechange=function(){
	if(ajax.readyState==1)
	{divLoader.innerHTML='<p align="center"><img src="../img/loading.gif" /> Cargando...</p>'}
		else{
			if(ajax.readyState==4){divResultado.innerHTML=ajax.responseText;divLoader.innerHTML=''}
			}
		}
	ajax.send(null)
}

la página que intento abrir es esta.

Código:

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

<style type="text/css" title="currentStyle">
	@import "../themes/sunny/jquery-ui-1.7.2.custom.css";
	@import "css/fullcalendar.css";	
</style>

<script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.datepicker.js'></script>
<script type='text/javascript' src='js/fullcalendar.js'></script>

<script type='text/javascript'>

	$(document).ready(function() {
		$('#calendar').fullCalendar();
	});
</script>


</head>
<body>

<div id="calendar"></div>

</body>
</html>

de esta manera lo que intento hacer es a través de la página index, abrir en una capa el calendario, y el problema viene porque intento abrir otra página que a su vez carga dentro de otra capa información y no me deja abrirlo.

Ya se que es un poco jaleo, pero quería mostrar la máxima información.

Gracias de antemano.
Un saludo.

masterojitos · #2 (**permalink**) 10/12/2009, 03:55

el problema es que al llamar con ajax....... las librerias javascript en la pagina cargada no son leidas, por tanto no va aparecer tu calendario........ no obstante, si deberia de haber un codigo para al momento que llamas a la otra pagina, se llamen o se activen las librerias js.

yo no me complico con eso por que utilizo jquery.... que es un framework de javascript. y ps ese ya trae una funcion getScript que activa los js de las paginas cargadas.
te dejo el link para que veas de que hablo: http://docs.jquery.com/Ajax/jQuery.g...pt#urlcallback

Suerte.

chi_flao · #3 (**permalink**) 10/12/2009, 05:01

Cita:

Iniciado por masterojitos

el problema es que al llamar con ajax....... las librerias javascript en la pagina cargada no son leidas, por tanto no va aparecer tu calendario........ no obstante, si deberia de haber un codigo para al momento que llamas a la otra pagina, se llamen o se activen las librerias js.

yo no me complico con eso por que utilizo jquery.... que es un framework de javascript. y ps ese ya trae una funcion getScript que activa los js de las paginas cargadas.
te dejo el link para que veas de que hablo: http://docs.jquery.com/Ajax/jQuery.g...pt#urlcallback

Suerte.

Gracias por la respuesta, la he entendido bastante bien, pero aún así no logro hacer que me salga todo correcto, he puesto esto, ¿te importaría corregirme en lo que esté mal?

Código:

<html>
<head>

<style type="text/css" title="currentStyle">
	@import "../themes/sunny/jquery-ui-1.7.2.custom.css";
	@import "css/fullcalendar.css";	
</style>


<script type='text/javascript'>

	$(document).ready(function() {
		
		$.getScript("../jquery/jquery.js");
		$.getScript("../jquery/ui.core.js");
		$.getScript("js/fullcalendar.js");

		$('#calendar').fullCalendar();
</script>



</head>
<body>
<div id="calendar"></div>
</body>
</html>

Gracias.

masterojitos · #4 (**permalink**) 10/12/2009, 05:13

eh......... estabas casi casi......... haha
asi quedan tus archivos..............

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css" title="currentStyle">
    @import "../themes/sunny/jquery-ui-1.7.2.custom.css";
    @import "css/fullcalendar.css"; 
  </style>
  <script type="text/javascript" src="../js/cargarPagina.js"></script>
  <script type='text/javascript' src='../jquery/jquery.js'></script>
</head>
<body>
 <a href="javascript:TraerPagina('calendario.html','calendario');">Alumnos</a>
 <div id="calendario"></div>
</body>
</html>

cargarPagina.js (Apesar que esta funcion tranquilamente podria ir en la web de arriba)

Código javascript:

Ver originalfunction TraerPagina(url, contenedor){
    $('#divLoader').html('<p align="center"><img src="http://www.forosdelweb.com/f77/img/loading.gif" /> Cargando...</p>');
    $('#'+contenedor).load(url);
    $.getScript("../jquery/jquery.js");
    $.getScript("../jquery/ui.core.js");
    $.getScript("js/fullcalendar.js");
}

calendario.html

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type='text/javascript'>
    $(document).ready(function() {
        
    });
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

HASTA AHI SERIA UNA FORMA.... SEGUN TU CODIGO........... Y AHORA YO TE PROPONGO ESTE:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css" title="currentStyle">
    @import "../themes/sunny/jquery-ui-1.7.2.custom.css";
    @import "css/fullcalendar.css"; 
  </style>
<script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.datepicker.js'></script>
<script type='text/javascript' src='js/fullcalendar.js'></script>
</head>
<body>
 <a href="javascript:$('#calendario').fullCalendar();">Alumnos</a>
 <div id="calendario"></div> 
</body>
</html>

espero te haya salido........

Ah, gracias por el karma...... :P

Suerte.