php - phpイベントカレンダー。javascriptボタンは押されません

Question

私は、phpカレンダーを作成する方法について非常に厄介なチュートリアルに従っています。最後のビットに到達しましたが、クリックしたときに特定の日付のデータベースからの情報を表示するボタンがある場合、何も起こりません。情報を表示するボックスを表示することになっています。エラーメッセージは表示されず、クリックしても何も起こりません。たぶん、iveは単純な間違いを犯しましたか？誰かアイデアはありますか？私は今夜これを終える必要があります:(ありがとう

events.php

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

include ("connect.php");

$events = '';
$query = mysql_query('SELECT description FROM events WHERE evdate = "'.$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;
?>

connect.php

<?php
$db_host = "localhost";
$db_username = "root";
$db_pass = "heyman";
$db_name = "ecalandar";
$conn = mysql_connect("$db_host", "$db_username","$db_pass") or die ("could not connect                          
to mysql");
mysql_select_db("$db_name") or die ("no database");
?>

calCSS.css

#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_the_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: #9C9;
}
.day_heading {
position: relative;
float: left;
width: 40px;
height: 16px;
padding: 6px;
color: #000;
font-family: Arial;
font-size: 14px;
}    
.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;
}

<!-- overlay --!>
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;
}

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

calendar_start.php

<?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_the_week">Mon</div>';
echo '<div class="days_of_the_week">Tue</div>';
echo '<div class="days_of_the_week">Wed</div>';
echo '<div class="days_of_the_week">Thur</div>';
echo '<div class="days_of_the_week">Fri</div>';
echo '<div class="days_of_the_week">Sat</div>';
echo '<div class="days_of_the_week">Sun</div>';
echo '<div class="clear"></div>';
echo '</div>';

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

/* Current Month */

//connect to mysql
include ("connect.php");
//
for($i=1; $i<= $day_count; $i++) {
//get events logic
$date = $showmonth.'/'.$i.'/'.$showyear;
$query = mysql_query('SELECT id FROM events WHERE evdate = "'.$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);'>";
}
//end get events

echo '<div class="cal_day">';
echo '<div class="day_heading">' . $i . '</div>';

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

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

show_calendar.php

 <!DOCTYPE html>
<html>
<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...";
}
</script>

<script language="JavaScript" type="text/javascript">
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...";
}
</script>


<script language="JavaScript" type="text/javascript">
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...";
}
</script>


<script type="text/javascrip">
function overlay() {
  el = document.getElementById("overlay");
  el.style.display = (el.style.display == "block") ? "none" : "block";
  el = document.getElementById("events");
  el.style.display = (el.style.display == "block") ? "none" : "block";
  el = document.getElementById("eventsBody");
  el.style.display = (el.style.display == "block") ? "none" : "block";
}
</script>


<script language="JavaScript" type="text/javascript">
function show_details(theId){
 var deets = (theId);
 el = document.getElementById("overlay");
 el.style.display = (el.style.display == "block") ? "none" : "block";
 el = document.getElementById("events");
 el.style.display = (el.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>



</head>
<body onLoad="initialCalendar();">
<div id="showCalendar"></div>
<div id="overlay"></div>
<div id="events"></div>
</div>
</body>

</html>

score 0 · Accepted Answer

コードをよく見ないと、(時代遅れで危険な) mysql 関数に文字列を渡していることに気付きました

$db_host = "localhost";
$db_username = "root";
$db_pass = "heyman";
$db_name = "ecalandar";
$conn = mysql_connect($db_host, $db_username,$db_pass) or die ("could not connect  to mysql");
mysql_select_db($db_name) or die ("no database");

pdo/mysqli でいくつかの読み取りを行う必要があります

php - phpイベントカレンダー。javascriptボタンは押されません

1 に答える 1

Related

Reference