sending already used variable via ajax - php

Question

I'm using jquery datepicker on a page. Next to datepicker i have a section which will show events on mouseenter of the datepicker. I have figured out a way to get the date into the header of this section. The problem i am having is getting that variable over to the php page that will be displayed on mousenter.
Below is the page that the datepicker and events will be shown:
<div id=events>
<div id=eventcontent>
</div>
</div>
<div id=eventsheading>
<div id=headingcontent>
</div>
</div>
<div id = "datepicker">
</div>
This is the Jquery i am using to fill in the header with the date (which works), send the same variable to events.php (which doesnt work), and show events.php in the content div (which does work as when i highlight a date, hello is shown):
$(document).on('mouseenter', '.ui-datepicker-calendar .ui-state-hover', function(e){
var daynum1 = $(this).text();
var month1 = $('.ui-datepicker-month').text();
var year1 = $('.ui-datepicker-year').text();
var Date = daynum1 + " " + month1 + " " + year1;
$('#headingcontent').html(Date);
//ajax call with date information
var request = $.ajax({
url: "events.php",
type: "POST",
data: {Date: Date},
dataType: "html"
});
$.ajax({
url: "events.php",
cache: false,
success: function(html){
$("#eventcontent").append(html);
}
});
});
Below is events.php:
if(isset($_POST['Date']))
{
$date = $_POST['Date'];
echo <<<_END
<p>$date</p>
_END;
}
else
{
echo <<<_END
<p>hello!</p>
_END;
}
once i get this bit working, events PHP will be changed to select events from mysql.
To clarify, the problem i am having is getting variable date to send via ajax with this code:
//ajax call with date information
var request = $.ajax({
url: "events.php",
type: "POST",
data: {Date: Date},
dataType: "html"
});
i cant seem to find anywhere that explains how data: {...}, should be used and I'm guessing this is my problem.
Sorry if the code is just completely wrong i'm very new to learning it all and thanks for any help.

Answer 1

you must not use variable names which collide with inbuilt objects as #CBroe said.
and rest like this
var myDate = daynum1 + " " + month1 + " " + year1;
$('#headingcontent').html(myDate);
$.ajax({
url: "events.php",
type: "POST",
data: {myDate: myDate},
dataType: "html",
success: function(html){
$("#eventcontent").empty();
$("#eventcontent").append(html);
}
});
no need for second ajax call