Hola buenos dias a todos...
Alguien me puede ayudar con el siguiente problemilla?
Resulta que tengo en una página un calendario (implementado con jquery datepicker) hasta ahí no hay problema, cuando trato de volver a utilizarlo ya no funciona, tengo que recargar el sitio completo para que vuelva a funcionar, es decir solo funciona una vez. alguna sugerencia?
Con sólo funciona una vez te refieres a que si cargas nuevo DOM dentro del sitio, sin recargar, usando AJAX, deja de funcionar, correcto?
Asi es.
Tengo dos divs, uno para un menú y otro para mostrar la información.
El menú está en la parte superior de la página, una de las opciones es la del calendario, la uso y funciona. Al volverla a seleccionar del menú ya no funciona.
Si el calendario se elimina del DOM en algún momento (aunque se vuelva a crear con las mismas características) ya no funcionará el trigger que lo abre :/
Cuando el DOM cambia tendrás que volver a inicializar los datepickers que no esten ya inicializados.
Por esto si yo necesito o quiero usar ajax para recargar contenido DOM en un sitio, suelo tirar de $.on();, estilo:
jQuery(document.body).on(evento, selector, function() { });Grrrrrrrrr sigo sin poderlo resolver,
Alguien que me apoye? Mi codigo es...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Listado de servicios por fechas...</title>
<link rel="stylesheet" href="css/calendario.css"/>
<script type="text/javascript" src="jquery/jquery10.2.js"></script>
<script src="jquery/calendario.js"></script>
<script>
$(function()
{
$("#datepicker1").datepicker(
{
//defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
onClose: function( selectedDate )
{
$("#datepicker2").datepicker( "option", "minDate", selectedDate );
}
});
$("#datepicker2").datepicker(
{
//defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate )
{
$("#datepicker1").datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<script lang="JavaScript">
$(document).ready(function()
{
$("#boton").click(function(evento)
{
evento.preventDefault();
var xfecha1=document.form1.datepicker1.value;
var xfecha2=document.form1.datepicker2.value;
$("#centro").load("paginas/cslf.php", {fecha1: xfecha1, fecha2: xfecha2}, function()
{
// alert("recibidos los datos por ajax"+ xfecha1);
});
});
})
</script>
</head>
<body>
<div id="centrar" style="margin: 0 35%;">
<h4> <b>LISTADO DE SERVICIOS POR FECHAS.</b></h4>
<br />
<table style="text-align: center; font-family: Helvetica;">
<tr>
<td>
<form action="paginas/cslf.php" name="form1" method="post" >
<fieldset><legend><b>Listado por fechas.</b></legend>
<table>
<tr>
<td>
Fecha Inicial:
</td>
<td>
<input type="text" id="datepicker1" readonly="yes" name="datepicker1" placeholder="dd-mm-aaaa" />
<!-- <input type="date" id="" name="fecha1" placeholder="dd-mm-aaaa" /> !-->
</td>
</tr>
<tr>
<td>
Fecha Final:
</td>
<td>
<input type="text" id="datepicker2" readonly="yes" name="datepicker2" placeholder="dd-mm-aaaa"/>
<!-- <input type="date" id="" name="fecha2" placeholder="dd-mm-aaaa" /> !-->
</td>
</tr>
</table>
<br />
<input type="submit" value="Ver..." id="boton"/>
</fieldset>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>