Hola, antes que nada quiero agradecer de antemano su apoyo, mi consulta es la siguiente:
Llevo ya varios dias quebrandome la cabeza en como cargar una pagina con funciones javascript en un div cargado por ajax.
El codigo de mi funcion ajax.js ubicado en la pagina padre es el siguiente:
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}
function Enviar(_pagina,capa) {
var ajax;
ajax = ajaxFunction();
ajax.open("POST", _pagina, true );
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function() {
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = "";
}
if (ajax.readyState == 4) {
document.getElementById(capa).innerHTML=ajax.respo nseText;
}}
ajax.send(null);
}
El codigo de mi pagina padre index.php es el siguiente:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Intranet</title>
<meta name="Autor" content="William del Cid" />
<link rel="stylesheet" href="../css/tabla.css" type="text/css" media="print, projection, screen">
<link rel="stylesheet" type="text/css" href="../css/drop.css" />
<script src="../menu/js/stuHover.js" type="text/javascript"></script>
<script src="../js/ajax.js" type="text/javascript"></script>
</head>
<body>
<div id="contenedor">
<div "id="encabezado">
<ul id="nav" name="nav">
<li class="top"><a href="javascript
:Enviar('http://172.20.161.91/cmovil/aplicaciones/principal.php','contenido')" class="top_link"><span>Inicio</span></a></li>
<li class="top"><a id="services" class="top_link"><span class="down">Promociones</span></a>
<ul class="sub">
<li><a href="javascript
:Enviar('http://172.20.161.91/cmovil/promociones.php','contenido')">Ing. Datos</a></li>
</ul>
</ul>
</div>
<div id="contenido">
<p class="style2">Bienvenido, por favor selecciona una opción del menu. </p>
</div>
</body>
</html>
Cuando yo llamo la pagina <a href="javascript
:Enviar('http://172.20.161.91/cmovil/promociones.php','contenido')">Ing. Datos</a> en el <div id="contenido"> se carga la pagina, pero esta pagina tiene funciones javascript como un calendario, los cuales detallo a continuacion:
<link rel="stylesheet" href="../calendar/calendarblue.css" type="text/css" media="print, projection, screen">
<script src="../calendar/calendar.js" type="text/javascript"></script>
<script src="../calendar/lang/calendar-es.js" type="text/javascript"></script>
<script src="../calendar/calendar-setup.js" type="text/javascript" ></script>
Sin embargo el calendario no se ejecuta en la pagina index.php cuando la llamo por ajax, pero si la cargo directamente si se ejecuta.
Por lo anterior agradecere su apoyo en orientarme que es lo que debo hacer para ejecutar javascript de una pagina hija en una pagina padre cuando la llamo con ajax, ya que soy nuevo en esto de ajax.
Saludos