Skip to main content
7 de 7
Correción de etiquetas
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

¿Cómo puedo cambiar de mes, año sin recargar la página?

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?