Update shortcode values using ajax call

Question

I'm having a problem with a calendar, I've made a shortcode which returns events links in a grid that shows the current month view.
I set $month_index in order to navigate through months (default is 0 so it shows the current month; it shows the next month when $month_index = 1 and so on).
The function agenda_script() should pass the $month_index value to Agenda_fn($atts) in order to update the shortcode output but it doesn't.
Any ideas about that?
Thanks in advance

$month_index = 0;
function Agenda_fn($atts) {
    global $month_index;
    if (isset($atts) && !empty($atts)) {$month_index = $atts;} else {$month_index = $month_ind;}
    ob_start();?>
    <button id="dec_month_index">&lt;</button>
    <button id="inc_month_index">&gt;</button>
    [...]
    <?php
    error_log('MONTH INDEX: ' . $month_index);
    return ob_get_clean();
}
add_shortcode('Agenda', 'Agenda_fn');

function agenda_script() {
    if(is_page(4037)){?>
        <script>
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        document.addEventListener('DOMContentLoaded', function() {
            jQuery(document).ready(function($) {
                $('#dec_month_index').on('click', function() {
                    $.ajax({
                        url: ajaxurl,
                        type: 'POST',
                        data: {action: 'dec_month_index',},
                            success: function(response) {
                            $.ajax({
                                url: ajaxurl,
                                type: 'POST',
                                data: {
                                    action: 'Agenda',
                                    atts: response
                                }
                            });
                            alert(response);
                        }
                    });
                });
                $('#inc_month_index').on('click', function() {...}
            });
        });
        </script><?php
    }
}
add_action('wp_enqueue_scripts', 'agenda_script');

function dec_month_index() {
    global $month_index;
    $month_index--;
    echo $month_index;
    wp_die();
}
add_action('wp_ajax_dec_month_index', 'dec_month_index');
add_action('wp_ajax_nopriv_dec_month_index', 'dec_month_index');
add_action('wp_ajax_Agenda', 'Agenda_fn');
add_action('wp_ajax_nopriv_Agenda', 'Agenda_fn');

Answer 1

The problem here is how PHP works. Once the server is done processing the GET request for a page, everything related to that request (i.e. values stored in global variables) is cleared and are lost.

What you need to is to keep track of, one way or the other, the month index in the front end with js/jquery. For example you could have a scoped variable for the index. E.g.

(function() {
    var monthIndex = 0;
    var monthIncrementButton = document.getElementById('inc_month_index');
    var monthDecrementButton = document.getElementById('dec_month_index');

    monthIncrementButton.addEventListener('click', function(event){
        event.preventDefault();

        monthIndex += 1;

        // send monthIndex with ajax request data
    });

    monthDecrementButton.addEventListener('click', function(event){
        event.preventDefault();

        monthIndex -= 1;

        // send monthIndex with ajax request data
    });
})();

In your AJAX callback you can access the sent month index by inspecting the $_POST variable.

function wpse_419368_agenda_ajax_callback() {
    wp_send_json([
        'month_index' => ! empty( $_POST['monthIndex'] ) ? intval( $_POST['monthIndex'] ) : 'No index provided';
    ]);
}

add_action( 'wp_ajax_Agenda', 'wpse_419368_agenda_ajax_callback' );
add_action( 'wp_ajax_nopriv_Agenda', 'wpse_419368_agenda_ajax_callback' );