ajax, php, java mixture, function call malfunction

[GraficRegret]

I found a tutorial on how to build a php events calendar and this tutorial uses a mixture of php, Ajax and Javascript to form the calendar, everything works properly and displays well, up to the point of actually pulling up and displaying the events details which are pulled from the server. Here are the script snipets where the problem occurs:
first in the calendar_start.php it makes a call to the Javascript function show_details

for($i = 1; $i <= $day_count; $i++)
{
    $date = $showMonth . '/' . $i . '/' . $showYear;
    $query = mysql_query('SELECT id FROM events WHERE date = "'.$date.'"') or die(mysql_error());
    $num_rows = mysql_num_rows($query);

    if($num_rows > 0)
    {
        $event = "<input name = '$date' type = 'submit' value = 'Details' id = '$date' onClick = 'javascript:show_details(this);'>"
        or die(mysql_error());
    }
    echo '<div class = "cal_day">';
    echo '<div class = "day_heading">' . $i . '</div>';

    if($num_rows != 0)
    {
        echo "<div class = 'openings'><br />" . $event . "</div>";
    }
    echo '</div>';
}

the show_details function makes a call using Ajax to convert the id of the button so it can be passed to the final script to be displayed with the details we are trying to get to, this is where I think the problem is at because I have never seen "theId" and "theId.id" used to try to pull up the information stored in the variables

function show_details(theId)
{
    var deets = (theId.id);

    e1 = document.getElementById("overlay");
    e1.style.display = (e1.style.display == "block") ? "none" : "block";
    e1 = document.getElementById("events");
    e1.style.display = (e1.style.display == "block") ? "none" : "block";

    var hr = new XMLHttpRequest();
    var url = "events.php";
    var vars = "deets=" + deets;

    hr.open("POST", url, true);
    hr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

    hr.onreadystatechange = function()
    {
        if(hr.readyState == 4 && hr.status == 200)
        {
            var return_data = hr.responseText;
            document.getElementById("events").innerHTML = return_data;
        }
    }
    hr.send(vars);
    document.getElementById("events").innerHTML = "Processing...";
}

and here in the events.php is where it uses the passed in information to pull up the event details and then display the to the user

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

include 'conect.php';

$deets = $_POST['deets'];
$deets = preg_replace('#[^0-9/]#i', '', $deets);

$events = '';
$query = mysql_query('SELECT description FROM events WHERE date = "'. $deets .'"') or die(mysql_error());
$num_rows = mysql_num_rows($query);

if($num_rows > 0)
{
    $events .= "<div id = 'eventsControl'><button onClick = 'javascript:overlay();'>Close</button><br /><br /><b>' . $deets . '</b><br /><br /></div>";

    while($row = mysql_fetch_array($query))
    {
        $desc = $row['description'];
        $events .= "<div id = 'eventsBody'>" . $desc . "<br /><hr><br /></div>";
    }
}
echo $events;
?>

if you need the full code let me know I will post it so you can use it, the resulting pages however show only a blank screen with no errors reported at all, I have posted this question in the php forum and they said that the error is in the java somewhere, this code seemed to work for the author of the tutorial, he showed it working at the end of said tutorial, please help.