PHP Calendar Pagination AJAX problems - php

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