5

Tengo el siguiente ajax, pero solo funciona una sola vez el cambio de datos, si vuelvo a presionar en cambiar no funciona:

$(function() {
  $(".dateCalendar").click(function (evt) {
    evt.preventDefault();
    //var DateTarget = $(this).data("target");
    var DateTarget = $(this).attr("data-target");
    $.ajax({
      url: "book.php?date="+DateTarget
    }).done(function(data) {
      $('#dataHours').html(data);
      $("#YearDayMonth").val(DateTarget);
    });
  });
  
  $(".changemonth").click(function (evt) {
    evt.preventDefault();
    var ChangeDateTarget = $(this).attr("data-target");
    $.ajax({
      url: "calendar.php"+ChangeDateTarget
    }).done(function(data) {
      $(".timetable").html(data);
    });
    //console.log(data);
  });
  
});

Los botones que se generan en PHP, dan como resultado lo siguiente: <a class="changemonth" data-target="?month=12&amp;year=2020">Mes siguiente</a> eso son los botones que me permite cambiar de mes, pero vuelvo y recalco solo funciona una vez, si vuelvo a dar click en el siguiente mes no funciona, si doy click en mes actual o mes anterior tampoco.

$calendar .= "<a class='changemonth' data-target='?month=" . 
date( 'm', mktime( 0, 0, 0, $month - 1, 1, $year ) ) .
"&year=" . date( 'Y', mktime( 0, 0, 0, $month - 1, 1, $year) ) .
"'>Mes anterior</a> ";

$calendar .= " <a class='changemonth' data-target='?month=" .
date('m') . "&year=" . date( 'Y' ) .
"'>Mes actual</a> ";

$calendar .= "<a class='changemonth' data-target='?month=" .
date( 'm', mktime( 0, 0, 0, $month + 1, 1, $year ) ) .
"&year=" . date( 'Y', mktime(0, 0, 0, $month + 1, 1, $year ) ) .
"'>Mes siguiente</a><br>";

Toda esa información la muestra en mi página principal o otro archivo no importa donde lo ubique:

<div class="field field-block">
  <div id="dropdown">
    <input type="text" name="date_calendar" id="YearDayMonth"
    class="hintable" readonly="readonly"
    />
    <div class="dropdown timetable" style="display: none;">
      <?php include 'calendar.php'; ?>
    </div>
    <label class="required">Fecha</label>
  </div>
</div>
<div class="field field-block">
  <div id="dataHours"></div>
  <label class="required">Hora</label>
</div>

La acción que recibe calendar.php la que permite cambiar de fecha es la siguiente, según lo que se especifique en el código ajax, ya sea en método POST o GET:

#Print rows date //$_POST
/*
$dateComponents = getdate();
if(isset($_POST['month']) && isset($_POST['year'])){
  $month = $_POST['month'];
  $year = $_POST['year'];
}else{
  $month = $dateComponents['mon'];
  $year = $dateComponents['year'];
}
//*/

#Print rows date //$_GET
$dateComponents = getdate();
if(isset($_GET['month']) && isset($_GET['year'])){
  $month = $_GET['month'];
  $year = $_GET['year'];
}else{
  $month = $dateComponents['mon'];
  $year = $dateComponents['year'];
}

echo BuildCalendar($con, $month, $year);

¿Qué cambios adicionales se le deben agregar a los botones generados por PHP que permite el cambio de fecha | mes anterior | mes actual | mes siguiente| o que cambios debo agregar a mi código ajax?

6
  • No entiendo ¿por qué tienes dos llamadas Ajax y por qué en una de ellas usas código PHP para obtener el año y el mes? ¿Podrías aclarar eso? Y, ¿a qué te refieres con cargar un archivo? Los archivos que pones en la url de las petciones Ajax son para mandar y/o pedir cosas al servidor, no para cargar esos archivos en cuanto tales.
    – A. Cedano
    Commented el 14 nov. 2020 a las 22:37
  • @A.Cedano Según el tutorial el primer ajax me debería cargar todos los datos del archivo calendar.php en el div que contenga el id->#calendar mientras que el otro ajax es para poder cambiar la información del archivo cargado sin recargar la página, he actualizado los datos que se desean recibir en el archivo calendar.php
    – Valentina
    Commented el 14 nov. 2020 a las 22:43
  • Ok, supongamos que sea así, en ese primer caso no tiene ningún sentido mandarle la fecha al servidor ¿acaso el servidor no conoce mejor que nadie su fecha?, ¡es como regalarle a alguien un libro que ya tiene!... Creo que puedes prescindir de esa 1ª llamada. Luego, este listener está desfasado: $(document).on('click', '.changemonth', function(){, Desde jQuery 3 document es obsoleto y escuchar los clicks de una clase es más sencillo ... dicho eso, ¿cuál de los dos es el que no funciona? En el que no funciona pon un console.log(data); y revisa en la consola si muestra algo.
    – A. Cedano
    Commented el 14 nov. 2020 a las 22:48
  • 1
    Tu problema será el mismo si intentas cargar los botones desde PHP, por lo tanto tu sitio es estático, lo que yo te recomiendo genera tus botones desde javascript en el cliente y mantén tu estado en el mismo Commented el 17 nov. 2020 a las 3:45
  • @EduardoJaramilloLicea Me parece la mejor solución, como podría hacerlo, me podrías guiar :)
    – Valentina
    Commented el 17 nov. 2020 a las 3:55

1 respuesta 1

1
+100

El evento onClick se pierde al recargar el fragmento, para evitar eso podes delegar el evento al elemento padre que no desaparece y que apunte a los elementos deseados que vayan a estar creándose y destruyéndose con cada llamada ajax, en este caso sería el elemento .timetable y quedaría algo así:

  $(".timetable").on("click", ".changemonth", function (evt) {
    evt.preventDefault();
    var ChangeDateTarget = $(this).attr("data-target");
    $.ajax({
      url: "calendar.php"+ChangeDateTarget
    }).done(function(data) {
      $(".timetable").html(data);
    });
    //console.log(data);
  });

Sucede lo mismo con elementos dentro de elementos o que también se carguen por ajax.

En el caso del .dateCalendar, al venir dentro del html anterior y estando también dentro de .timetable, quedaría así:

$(".timetable").on("click", ".dateCalendar", function (evt) {
    evt.preventDefault();
    //var DateTarget = $(this).data("target");
    var DateTarget = $(this).attr("data-target");
    $.ajax({
      url: "book.php?date="+DateTarget
    }).done(function(data) {
      $('#dataHours').html(data);
      $("#YearDayMonth").val(DateTarget);
    });
  });

Si dentro de #dataHours o #YearDayMonth también hay elementos con eventos hay que reengancharlos al (re)cargarlos o delegar al ancestro que no cambia.

6
  • Funciona correctamente, pero existe un problema con el primer ajax, el calendar.php lo que hace es generar un calendario en PHP y con la solución que usted me brinda me da la posibilidad de cambiar de mes anterior, mes actual o mes siguiente... Ahora dentro de los cuadriculas del calendario se genera esto <td class=""><h4>25</h4> <a id="dateCalendar" class="dateCalendar" data-target="2021-05-25">Disponible</a> <small><i>4 Turnos</i></small></td> entonces lo que hace el primer ajax es que al dar click en disponible me carga el horario disponible en <div id="dataHours"></div>
    – Valentina
    Commented el 18 nov. 2020 a las 21:52
  • cuando no doy click en cambiar de mes anterior, mes actual o mes siguiente... funciona es decir que al dar click en disponible me cargar los horarios disponibles pero cuando cambio de mes, al dar click en disponible es decir así: <a id="dateCalendar" class="dateCalendar" data-target="2021-05-25">Disponible</a> no funciona, no me carga el horario disponible
    – Valentina
    Commented el 18 nov. 2020 a las 21:55
  • el problema es el mismo, los onclick se pierden al reemplazar los elementos. hay que hacer lo mismo con esos eventos Commented el 18 nov. 2020 a las 22:02
  • exactamente es el mismo problema, pero estoy confundida, como tendría que quedar $(".dateCalendar").click(function (evt) {
    – Valentina
    Commented el 18 nov. 2020 a las 22:03
  • 1
    así debería quedar verdad? $(".timetable").on("click", ".dateCalendar", function (evt) {
    – Valentina
    Commented el 18 nov. 2020 a las 22:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.