update div based on value passed with a button using ajax

I am displaying a calendar server side with php. Now I would like to scroll the months with 2 buttons (<< / >>) without reloading the whole page. There are loads of questions and examples, and I found some very close around forms, however, I have not really understood how to adapt this to a button.

A very simple script to pass the request new data is

<script>
$(document).ready(function(){
    $("moveCal").click(function(){
        $("#calendar").load("/presentation/cal.php");
    });
});
</script>

A previous attempt of the php to request another month looked like this

  
 echo '<span onclick="updateCal(''.$toMonth->format('mY').'')">';
echo '<span class="calendar_month_link">   '.$toMonth->format('M').' &gt</span></span>';   

But how do I connect the updateCal() function with $(document).ready(function(){?

And another thing I am a bit confused about: If I am not working with a session id stored in a cookie, the application server still serves only the requesting IP with the requested date, right? Other simultaneous users can select other dates to be shown?

Answer

You may want more detail, but here’s the gist of it:

A user visits a webpage and the address points to a PHP file- the PHP file runs on the server. It runs once per request, so the output will only be served to the requestor. If the file is static, or if it always produces the same HTML output- it’ll be the same for everyone.

In your case, it sounds like you want at least a month variable, maybe a year variable too. When a request comes in with a variable (like $('#calendar').load('/presentation/cal.php?month=10&year=2021')) you can use the variable value to change the output. Since the variable is from the request, the output will be specific to the passed variables- thus every user on the site can send a different request and all see unique output.

In the above example, the month and year are passed via GET (i.e. they’re appended to the URL as opposed to being in a form or passed via POST AJAX like $.post('cal.php', {month: 10, year: 2021}, function(responseData) { /*...*/ });).

PHP in turn has the $_GET and $_POST arrays to hold parameters passed via GET and POST methods respectively. So in the PHP file being requested (cal.php) you could use $_GET['month'] and $_GET['year'] to access the requested month and year. You would want to check if they exist in the request, and if not, use a default. If they are in the request, you’ll want to verify that they’re legitimate values, and if not, resort to the defaults (or deliver the user an error message).

So the pseudo-code might look something like:

cal.php

<?php
  $defaultMonth = date("n");
  $defaultYear = date("Y");
  $month = isset($_GET['month']) ? $_GET['month'] : $defaultMonth;
  /* check that $month is 1 - 12 [or whatever format you're expecting] and if not, set it to $defaultMonth instead, same thing for year */
  $year = isset($_GET['year']) ? $_GET['year'] : $defaultYear;
  /* query your database for events occurring in month $month and year $year */
  /* echo out your calendar HTML with the included events from the requested month/year */
?>

index.php:

<div id='calendar'></div>
<script src='/path/to/jquery.js'></script>
<script>
  var defaultMonth = <?php echo date("n") ?>;
  var defaultYear = <?php echo date("Y") ?>;
  
  var currentMonth = defaultMonth;
  var currentYear = defaultYear;
  
  function UpdateCal() {
    $('#calendar').load('cal.php?month=' + currentMonth + '&year=' + currentYear);
  }
  
  function NextMonth() {
    currentMonth += 1;
    if(currentMonth == 13) {
      currentMonth = 1;
      currentYear += 1;
    }
    UpdateCal();
  }
  
  function PrevMonth() {
    currentMonth -= 1;
    if(currentMonth == 0) {
      currentMonth = 12;
      currentYear -= 1;
    }
    UpdateCal();
  }
  
</script>