Aqui dejo un ejemplo pequeño del problema que tengo.
en el archivo prueba1.php el calendario funciona sin problemas, pero cuando llamo al archivo prueba2.php este no me funcona en dicha pagina, nose cual es el problema ya qe no se como funciona mootools, quizas ese es el problema, espero me ayuden porfa, gracias
PRUEBA1.PHP
Código PHP:
<head>
<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1.css" type="text/css" />
<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-adobe_cs3.css" type="text/css" />
<link rel="stylesheet" media="screen" href="styles/vlaCal-2.1-apple_widget.css" type="text/css" />
<script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script>
<script language="JavaScript1.2" src="script.js"></script>
<!-- You could also include the uncompressed versions for developing purposes:
<script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>-->
<title>Vista-Like Ajax Calendar version 2.1.1 - Examples</title>
<style>
body {
cursor: default;
text-align: left;
font-family: calibri, arial, sans-serif;
font-size: 13px;
margin: 0;
padding: 5px;
}
table th {
vertical-align: top;
}
input {
text-align: center;
font-family: calibri, arial, sans-serif;
font-size: 13px;
background-color: white;
border: 1px solid;
border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
padding: 2px;
}
input:focus, input:hover {
border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
}
.pickerImg {
position: absolute;
margin-left: -16px;
margin-top: 5px;
cursor: pointer;
}
.infoBox {
background-color: #fefdec;
border: 1px solid #edebcd;
padding: 6px;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
window.addEvent('domready', function() {
new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
});
</script>
</head>
<body>
<table cellpadding="0">
<tr>
<th>Example III</th>
<td>
<span id="exampleIII">
<input name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="month" class="textbox" type="text" style="width: 16px; border-width: 1px 0 1px 0;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="year" type="text" style="width: 28px; border-width: 1px 0 1px 0;" maxlength="4" /><input type="text" style="width: 15px; border-width: 1px 1px 1px 0;" disabled="disabled" /><img src="images/calendar.gif" id="togglePicker" class="pickerImg" width="13px" height="12px" alt="" />
</span>
</td>
</tr>
</table>
<input type="button" value="Enviar" onclick="envia()" />
<div id="contenido">
a
</div>
</body>
</html>
PRUEBA2.PHP
Código PHP:
<!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>
<meta http-equiv="content-language" content="en" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="copyright" content="R. Schoo" />
<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1.css" type="text/css" />
<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-adobe_cs3.css" type="text/css" />
<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-apple_widget.css" type="text/css" />
<script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script>
<!-- You could also include the uncompressed versions for developing purposes:
<script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>-->
<title>Vista-Like Ajax Calendar version 2.1.1 - Examples</title>
<style>
body {
cursor: default;
text-align: left;
font-family: calibri, arial, sans-serif;
font-size: 13px;
margin: 0;
padding: 5px;
}
table th {
vertical-align: top;
}
input {
text-align: center;
font-family: calibri, arial, sans-serif;
font-size: 13px;
background-color: white;
border: 1px solid;
border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
padding: 2px;
}
input:focus, input:hover {
border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
}
.pickerImg {
position: absolute;
margin-left: -16px;
margin-top: 5px;
cursor: pointer;
}
.infoBox {
background-color: #fefdec;
border: 1px solid #edebcd;
padding: 6px;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
window.addEvent('domready', function() {
new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
});
</script>
</head>
<body>
<table cellpadding="0">
<tr>
<th>Example III</th>
<td>
<span id="exampleIII">
<input name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="month" class="textbox" type="text" style="width: 16px; border-width: 1px 0 1px 0;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="year" type="text" style="width: 28px; border-width: 1px 0 1px 0;" maxlength="4" /><input type="text" style="width: 15px; border-width: 1px 1px 1px 0;" disabled="disabled" /><img src="images/calendar.gif" id="togglePicker" class="pickerImg" width="13px" height="12px" alt="" />
</span>
</td>
</tr>
</table>
</body>
</html>
SCRIPT.JS
Código PHP:
// JavaScript Document
//******************************************************************
//Funcion para la conexion ajax
//******************************************************************
function nuevoAjax(){
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;
}
//******************************************************************
// FUNCION
//******************************************************************
function envia()
{
var central;
central = document.getElementById('contenido');
ajax=nuevoAjax();
ajax.open("GET", "prueba2.php?cargar",true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
central.innerHTML = ajax.responseText
}
}
ajax.send(null)
}