Click! Y actualizar
Necesito de tu ayuda nuevamente...
Esta vez tengo un calendario que encontré en la web, ya que necesito hacer una agenda de turnos... El archivo se llama calendar.html
Ese calendario lo agrego a otro archivo (turnos.php) a través de include()
Lo que necesito es que cuando haga click en alguna fecha determinada, me recargue la página (turnos.php) con los turnos de ese día.
Te muestro el calendario y después el archivo que quiero recargar cuando haga click sobre alguna fecha determinada
-------------------------------------------------
calendario.html
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dynarch Calendar -- Populate fields</title>
<script src="calendario/src/js/jscal2.js"></script>
<script src="calendario/src/js/lang/es.js"></script>
<link rel="stylesheet" type="text/css" href="calendario/src/css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="calendario/src/css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="calendario/src/css/steel/steel.css" />
</head>
<body>
<form>
<table>
<tr>
<td colspan="4" id="cont"></td>
</tr>
<tr>
<td>
<input style="text-align: center" readonly="true" name="date" id="f_date" size="14" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">//<![CDATA[
// this handler is designed to work both for onSelect and onTimeChange
// events. It updates the input fields according to what's selected in
// the calendar.
function updateFields(cal) {
var date = cal.selection.get();
if (date) {
date = Calendar.intToDate(date);
document.getElementById("f_date").value = Calendar.printDate(date, "%Y-%m-%d");
}
};
Calendar.setup({
cont : "cont",
<!--showTime : 12,-->
onSelect : updateFields,
onTimeChange : updateFields
});
//]]></script>
</body>
</html>
----------------------------------------------------
ahora te muestro turnos.php
<!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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/sao/css/style.css">
<title>Turnos</title>
</head>
<body background="/sao/imgs/fondo_iframe.jpg">
<table width="100%" border="0">
<tr>
<td>
<table width="700" align="center" border="0">
<tr>
<td>
<table width="700" border="1" bordercolorlight="#666666" align="center" bgcolor="#FFFFFF">
<tr class="cabecera">
<td align="center">Hora</td>
<td nowrap="nowrap" align="center">Apellido</td>
<td nowrap="nowrap" align="center">Nombre</td>
<td align="center">Motivo</td>
<td align="center">Tipo</td>
<td nowrap="nowrap" align="center" width="1%">Primer visita?</td>
</tr>
<tr>
<td width="1%">9:30</td>
<td></td>
</table>
</td>
<td valign="top"><?php include_once ("calendario.html") ?></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
-----------------------------------------------
Esta vez tengo un calendario que encontré en la web, ya que necesito hacer una agenda de turnos... El archivo se llama calendar.html
Ese calendario lo agrego a otro archivo (turnos.php) a través de include()
Lo que necesito es que cuando haga click en alguna fecha determinada, me recargue la página (turnos.php) con los turnos de ese día.
Te muestro el calendario y después el archivo que quiero recargar cuando haga click sobre alguna fecha determinada
-------------------------------------------------
calendario.html
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dynarch Calendar -- Populate fields</title>
<script src="calendario/src/js/jscal2.js"></script>
<script src="calendario/src/js/lang/es.js"></script>
<link rel="stylesheet" type="text/css" href="calendario/src/css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="calendario/src/css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="calendario/src/css/steel/steel.css" />
</head>
<body>
<form>
<table>
<tr>
<td colspan="4" id="cont"></td>
</tr>
<tr>
<td>
<input style="text-align: center" readonly="true" name="date" id="f_date" size="14" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">//<![CDATA[
// this handler is designed to work both for onSelect and onTimeChange
// events. It updates the input fields according to what's selected in
// the calendar.
function updateFields(cal) {
var date = cal.selection.get();
if (date) {
date = Calendar.intToDate(date);
document.getElementById("f_date").value = Calendar.printDate(date, "%Y-%m-%d");
}
};
Calendar.setup({
cont : "cont",
<!--showTime : 12,-->
onSelect : updateFields,
onTimeChange : updateFields
});
//]]></script>
</body>
</html>
----------------------------------------------------
ahora te muestro turnos.php
<!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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/sao/css/style.css">
<title>Turnos</title>
</head>
<body background="/sao/imgs/fondo_iframe.jpg">
<table width="100%" border="0">
<tr>
<td>
<table width="700" align="center" border="0">
<tr>
<td>
<table width="700" border="1" bordercolorlight="#666666" align="center" bgcolor="#FFFFFF">
<tr class="cabecera">
<td align="center">Hora</td>
<td nowrap="nowrap" align="center">Apellido</td>
<td nowrap="nowrap" align="center">Nombre</td>
<td align="center">Motivo</td>
<td align="center">Tipo</td>
<td nowrap="nowrap" align="center" width="1%">Primer visita?</td>
</tr>
<tr>
<td width="1%">9:30</td>
<td></td>
</table>
</td>
<td valign="top"><?php include_once ("calendario.html") ?></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
-----------------------------------------------
1 Respuesta
Respuesta de ditman
1
Por lo que veo la función que maneja los clicks y cambios de fecha en el calendario es:
function updateFields(cal)
Lo que tienes que hacer es modificarla para que en vez de hacer lo que hace, envíe una request al servidor (AJAX) que cambie el resto de la página. Una versión muy básica sería algo parecido a esto:
function updateFields(cal) {
var date = cal.selection.get();
if (date) {
date = Calendar.intToDate(date);
window.location = 'turnos.php?date=' + Calendar.printDate(date, "%Y-%m-%d");
}
};
O similar :)
Consulta la documentación de MDC para encontrar información sobre JavaScript y su sintaxis.
function updateFields(cal)
Lo que tienes que hacer es modificarla para que en vez de hacer lo que hace, envíe una request al servidor (AJAX) que cambie el resto de la página. Una versión muy básica sería algo parecido a esto:
function updateFields(cal) {
var date = cal.selection.get();
if (date) {
date = Calendar.intToDate(date);
window.location = 'turnos.php?date=' + Calendar.printDate(date, "%Y-%m-%d");
}
};
O similar :)
Consulta la documentación de MDC para encontrar información sobre JavaScript y su sintaxis.
