2014-01-12 2 views
0

Я создаю календарь php, и я использую Javascript/Ajax, чтобы прокручивать между месяцами, не обновляя страницу. Календарь отлично работал без Javascript/Ajax, но теперь он просто отображает простой белый экран.Php calendar с Javascript/Ajax

Извините за большую кучу коды

Код: ** show_calendar.php **

<html> 
    <head> 
    <link href="calstyle.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 next_month = 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 last_month = showmonth - 1; 
     if(lastmonth <1) { 
      lasttmonth = 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> 
    </head> 
    <body onload="initialCalendar();"> 
    <div id="showCalendar"> </div> 
    </body> 
    </html> 

**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="submit" type="submit" value="Previous Month" onClick="javascript:last_month();"></div>'; 
echo '<div class="show_month">' . date('F', mktime(0, 0, 0, $showmonth)) . ' ' . $showyear . '</div>'; 
echo '<div class="next_month"><input name="submit" type="submit" value="Next Month" onClick="javascript:next_month();"></div>'; 
echo '</div>'; 

echo '<div class="week_days">'; 
echo '<div class="days_of_the_week">Sun</div>'; 
echo '<div class="days_of_the_week">Mon</div>'; 
echo '<div class="days_of_the_week">Tues</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="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++) { 
    echo '<div class="cal_day">'; 
    echo '<div class="day_heading">' . $i . '</div>'; 
    echo '</div>'; 
} 

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

Кто-нибудь ??? Мне очень нужна помощь – user3181157

ответ

0

Пойдемт по частям.

Во-первых, вы утроенный код, который вы действительно должны свернуть в одну функцию, скажем, function load_month(n) под названием с load_mont(current), load_month(current+1) и load_month(current-1) соответственно (я оставляю вам сделать фактический код здесь).

Во-вторых, у вас есть по крайней мере две ошибки случай: var currentTime = new date(); должны иметь Date и в строке 23, getElementbyId не хватает капитала B.

Три, на моей локальной установке php на локальном сервере расширение Календаря, кажется, отсутствует (по крайней мере, метод cal_days_in_month). Итак, если после предыдущих исправлений ваш код все еще не работает, вы можете посмотреть на него.

+0

Большое спасибо, я исправил 2 ошибки и теперь показываю календарь, но не меняет месяцы, когда вы нажимаете в следующем месяце или в предыдущем месяце. Есть идеи? – user3181157

+0

проблема не беспокоит, теперь решена благодаря вашей помощи. Строка 28 next_month должна быть следующей – user3181157