Home / Questions / 406827
Accepted
Valentina
Asked: 2021-11-15 14:25:46 +0800 CST 2021-11-15 14:25:46 +0800 CST

How can I change the month, year without reloading the page?

  • 772

I have the following ajax, but the data change only works once, if I press change again it doesn't work:

$(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);
  });
  
});

The buttons that are generated in PHP, result in the following: <a class="changemonth" data-target="?month=12&amp;year=2020">Mes siguiente</a>these are the buttons that allow me to change the month, but I go back and highlight it only works once, if I click again on the next month it does not work, if I click on current month or previous month either.

$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>";

All that information is displayed on my main page or another file no matter where I put it:

<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>

The action received calendar.phpby the one that allows the date to be changed is the following, depending on what is specified in the ajax code, either in the POST or GET method:

#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);

What additional changes should be added to the buttons generated by PHP that allow the change of date | previous month | current month | next month | or what changes should I add to my ajax code?

php

1 Answers

  1. Best Answer

    The event onClickis lost when reloading the fragment, to avoid that you can delegate the event to the parent element that does not disappear and that points to the desired elements that are going to be created and destroyed with each ajax call, in this case it would be the element .timetableand something would remain So:

      $(".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);
  });

    The same thing happens with elements within elements or that are also loaded by ajax.

    In the case of .dateCalendar, since it comes inside the previous html and also being inside .timetable, it would look like this:

    $(".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);
    });
  });

    If inside #dataHoursor #YearDayMonththere are also elements with events, you have to rehook them when (re)loading them or delegate to the ancestor that does not change.

    • 1