PHP Calendar Pagination AJAX problems

Question

I'm trying to add AJAX pagination to my calendar, to avoid reloading the entire site as the calendar is located in a secondary tab, that reset to the primary tab on a reload. Usually my "NEXT MONTH"-button would be wrapped in a link, that refreshed the same page with a GET-value of the date like this:

<a href="?date=<?php echo $nextDate; ?>">
    <button type="button" class="btn">
        NEXT MONTH
    </button>
</a>

Which works just fine. But when I'm trying to pass the $nextDate value in a form to AJAX, and reload the page, it's as though it's not picking up the POST-value.

HTML:

<form method="post">
    <input type="hidden" class="form-control" name="the_date" value="<?php echo $prevDate; ?>" />
        <button type="button" data-name="next-month" class="btn">
            NEXT MONTH
        </button>
</form>

Javascript:

$("body").on( "click", "[data-name='next-month']", function() { 
    var the_date = $(this.form).find(".form-control[name=the_date]").val();
        ajaxRequest = $.ajax({
            type: "POST",
            url: "index.php",
            data: { the_date: the_date}
   }).done(function (result) {
            alert(the_date)
            $("#calendar_container").load("index.php #calendar_container");
   })
});

Am I going about this the right way, or is there some sort of reason why POST-values aren't picked up when sending them to the same url? If you have any suggestions as to how I can solve this, it would make my day!

Answer 1

When you are sending data write parameter name as a string constant.

data: { "the_date": the_date}

not

data: { the_date: the_date}

You making ajax request twice. The second without any parameters. So replace next line

$("#calendar_container").load("index.php #calendar_container");

with

$("#calendar_container").html(result);