2012-11-08 22 views
0

我一直在关注如何制作php日历的一个非常讨厌的教程。我已经到了最后一点,但我有一个按钮来显示某些日期的数据库中的信息,当我点击它没有任何反应。它应该显示一个显示信息的框。没有错误信息或任何事情,当你点击它时什么都没有发生。也许我做了一个简单的错误?有没有人有任何想法?我需要完成今晚:( 感谢php事件日历。 javascript按钮不会按

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> 
+0

它可能是由于你的CSS文件名#eventcontrol不同于show_calendar ... 即时通讯仍然有问题我只是想知道你是否有你的工作? ? – user2108423

回答

0

不会在您的代码过于紧密的样子,我注意到您在字符串传递到你的(过时的和危险的),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

+0

即时通讯tutoriak – user1801197

+0

您是否尝试进行建议更改? 'mysql_select_db($ db_name)'etc? –

+0

嘿耶是谢谢,没有改变:(Im难倒! – user1801197