calendar not showing events details

Question

GraficRegret 0 Junior Poster

11 Years Ago

well here I go again it is probobly a minor mistake that I am missing, however I am having issues getting the 'description' that I have entered into my database to show up inside the div when the 'details' button is clicked, to follow are each page of code allong with the names each is saved under, everything else works great its just displaying the content of the 'description' field in the database that fails.

Here is show_calendar.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="calCss.css" rel="stylesheet" type="text/css" media="all"/>
<script language="javascript" type="text/javascript">
function initialCalendar()
{
    var hr = new XMLHttpRequest();
    var url = "calendar_start.php";
    var currentTime = new Date();
    var month = currentTime.getMonth() + 1;
    var year = currentTime.getFullYear();
    showMonth = month;
    showYear = year;
    var vars = "showMonth=" + showMonth + "&showYear=" + showYear;
    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("showCalendar").innerHTML = return_data;
        }
    }
    hr.send(vars);
    document.getElementById("showCalendar").innerHTML = "Processing...";
}

function next_month()
{
    var nextMonth = showMonth + 1;

    if(nextMonth > 12)
    {
        nextMonth = 1;
        showYear = showYear + 1;
    }
    showMonth = nextMonth;

    var hr = new XMLHttpRequest();
    var url = "calendar_start.php";
    var vars = "showMonth=" + showMonth + "&showYear=" + showYear;

    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("showCalendar").innerHTML = return_data;
        }
    }
    hr.send(vars);
    document.getElementById("showCalendar").innerHTML = "Processing...";
}

function last_month()
{
    var lastMonth = showMonth - 1;

    if(lastMonth < 1)
    {
        lastMonth = 12;
        showYear = showYear - 1;
    }
    showMonth = lastMonth;

    var hr = new XMLHttpRequest();
    var url = "calendar_start.php";
    var vars = "showMonth=" + showMonth + "&showYear=" + showYear;

    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("showCalendar").innerHTML = return_data;
        }
    }
    hr.send(vars);
    document.getElementById("showCalendar").innerHTML = "Processing...";
}

function overlay()
{
    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";
    e1 = document.getElementById("eventsBody");
    e1.style.display = (e1.style.display == "block") ? "none" : "block";
}

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...";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload="initialCalendar()">
<div id = "showCalendar"></div>
<div id = "overlay">
    <div id = "events"></div>
</div>
</body>
</html>

here is calendar_start.php

<?php
include 'conection.php';

$showMonth = $_POST["showMonth"];
$showYear = $_POST["showYear"];
$showMonth = preg_replace('#[^0-9]#i', '', $showMonth);
$showYear = preg_replace('#[^0-9]#i', '', $showYear);
$day_count = cal_days_in_month(CAL_GREGORIAN, $showMonth, $showYear);
$pre_days = date('w', mktime(0, 0, 0, $showMonth, 1, $showYear));
$post_days = (6 -(date('w', mktime(0, 0, 0, $showMonth, $day_count, $showYear))));

echo '<div id = "calendar_wrap">';
echo '<div class = "title_bar">';
echo '<div class = "previous_month"><input name = "myBtn" type = "submit" value = "Previous Month" onClick = "javascript: last_month();"></div>';
echo '<div class = "show_month">' . $showMonth . '/' . $showYear . '</div>';
echo '<div class = "next_month"><input name = "myBtn" type = "submit" value = "Next Month" onClick = "javascript: next_month();"></div>';
echo '</div>';
echo '<div class = "week_days">';
echo '<div class = "days_of_week">Sun</div>';
echo '<div class = "days_of_week">Mon</div>';
echo '<div class = "days_of_week">Tue</div>';
echo '<div class = "days_of_week">Wed</div>';
echo '<div class = "days_of_week">Thu</div>';
echo '<div class = "days_of_week">Fri</div>';
echo '<div class = "days_of_week">Sat</div>';
echo '<div class = "clear"></div>';
echo '<div>';

if($pre_days != 0)
{
    for($i = 1; $i <= $pre_days; $i++)
    {
        echo '<div class = "non_cal_day"></div>';
    }
}

for($i = 1; $i <= $day_count; $i++)
{
    $date = $showMonth . '/' . $i . '/' . $showYear;
    $query = mysql_query('SELECT id FROM events WHERE date = "'.$date.'"');
    $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);'>";
    }
    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>';
}

if($post_days != 0)
{
    for($i = 1; $i <= $post_days; $i++)
    {
        echo '<div class = "non_cal_day"></div>';
    }
}
echo '</div>';
?>

here is events.php

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

include '../core/database/conection.php';

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

if($num_rows > 0)
{
    $events .= '<div id = "eventsControl"><button onMouseDown = "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;
?>

and here is the longest the calCss.css

@charset "utf-8";
/* CSS Document */

#calendar_wrap
{
    width: 924px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.title_bar
{
    width: 100%;
    height: 30px;
}

.previous_month
{
    float: left;
    width: 308px;
    height: 30px;
    text-align: left;
}

.show_month
{
    float: left;
    width: 308px;
    height: 30px;
    text-align: center;
}

.next_month
{
    float: left;
    width: 308px;
    height: 30px;
    text-align: right;
}

.week_days
{
    width: 100%;
}

.days_of_week
{
    float: left;
    width: 14%;
    text-align: center;
}

.cal_day
{
    position: relative;
    float: left;
    margin-right: 4px;
    margin-bottom: 4px;
    width: 128px;
    height: 95px;
    background-color: #09F;
}

.day_heading
{
    position: relative;
    float: left;
    width: 40px;
    height: 16px;
    padding: 6px;
}

.openings
{
    width: 100%;
    clear: left;
    text-align: center;
}

.non_cal_day
{
    position: relative;
    float: left;
    margin-right: 4px;
    margin-bottom: 4px;
    width: 128px;
    height: 95px;
    background-color: #ccc;
}

.clear
{
    clear: both;
}

body
{
    height: 100%;
    margin: 0;
    padding: 0;
}

#overlay
{
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: #000;
    opacity: .9;
}

#events
{
    display: none;
    width: 500px;
    border: 4px solid #9c9;
    padding: 15px;
    z-index: 3000;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
    height: 400px;
    overflow: scroll;
}

#eventsControl
{
    display: none;
    width: 100%;
    height: 30px;
    z-index: 3000;
}

#eventBody
{
    display: none;
    width: 100%;
    z-index: 3000;
}

I have a fealing that my issue is somewhere in the events.php or the show_details function, however I am simply not seeing anywhere that the issue should be cropping up, thanks.

php

1 Contributor
2 Replies
136 Views
3 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by GraficRegret

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

GraficRegret 0 Junior Poster · Answer 1 · 2012-12-27T19:22:34+00:00

GraficRegret 0 Junior Poster

11 Years Ago

removed

Edited 11 Years Ago by GraficRegret

GraficRegret 0 Junior Poster · Answer 2 · 2012-12-27T19:43:07+00:00

well for anyone that wants to see these are where I think that the problem is I just cant find it, in the show_calendar.php this function is one of the places I suspect here is that code

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 then the events.php code is my other suspect though I have been looking at the javascript that makes the call to the show_details function and here is that code

for($i = 1; $i <= $day_count; $i++)
{
    $date = $showMonth . '/' . $i . '/' . $showYear;
    $query = mysql_query('SELECT id FROM events WHERE date = "'.$date.'"');
    $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);'>";
    }
    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>';
}

there is something not comunicating propperly so that the information of my description cell in my mysql database table is not being pulled up and displayed like it should be and that is also keeping even the button created to exit the overlay from being created.