事件仅在第一次加载时显示,而不是在单击下一个或上一个之后显示


Events display only on first load, not after clicking next or previous

我正在制作一个简单的事件日历。当我第一次加载页面时,会加载日历。然后,当我单击下一个或上一个时,它会带我进入下一个月,但事件不会加载,月份标题也不会更改,但会绘制正确的日历。我试着从代码中提取事件脚本,并将其放入控制ajax的函数中,但没有成功。

这是该页面的链接。http://hartslogmuseum.com/bookhjr10/cal/final/ajcal3.php(是的,现在很难看)

有人能给我指个正确的方向吗。谢谢这是代码。

  <?php
/* Open up a connection to the mysql database on the same server as website */
    $dbhost =   '';
    $dblogin = '';
    $dbpass = '!';
    $dbbase = '';
    $conn = mysql_connect($dbhost, $dblogin, $dbpass, $dbbase)
        or die("Unable to connect to mysql database");
    function isAjax() {
     return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
         $_SERVER ['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest';
    }
    if(isAjax() && isset($_POST['month']))
    {
        $month = $_POST['month'];
        $year = !isset($_POST['year']) ? date('Y', $current_time) : $_POST['year'];
        $events = array();
    die(draw_calendar($month,$year,$events));
        die(draw_calendar($month,$year,$events));
    }


    /* Select our database (there is more than one in my server) */
    mysql_select_db("", $conn);

    /* draws a calendar */
    function draw_calendar($month,$year,$events = array()){
        echo '<div id="calendar_wrapper">';
        /* draw table */
        $calendar = '<table cellpadding="0" cellspacing="0" class="calendar">';
        /* table headings */
        $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
        $calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';
        /* days and weeks vars now ... */
        $running_day = date('w',mktime(0,0,0,$month,1,$year));
        $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
        $days_in_this_week = 1;
        $day_counter = 0;
        $dates_array = array();
        /* row for week one */
        $calendar.= '<tr class="calendar-row">';
        /* print "blank" days until the first of the current week */
        for($x = 0; $x < $running_day; $x++):
            $calendar.= '<td class="calendar-day-np">&nbsp;</td>';
            $days_in_this_week++;
        endfor;
        /* keep going with days.... */
        for($list_day = 1; $list_day <= $days_in_month; $list_day++):
        $calendar.= '';
    /* add leading zero in the day number */
        if($list_day < 10) {
             $list_day = str_pad($list_day, 2, '0', STR_PAD_LEFT);
             }
    /* add leading zero in the month number */
        if($month < 10) {
             $month = str_pad($month, 2, '0', STR_PAD_LEFT);
             }
        $event_day = $year.'-'.$month.'-'.$list_day; 
        $calendar.= '<td class="calendar-day"><div style="position:relative;height:100px;">';

        /* add in the day number */
                $calendar.= '<div class="day-number">'.$list_day.'</div>';
                $event_day = $year.'-'.$month.'-'.$list_day;
                if(isset($events[$event_day])) {
                    foreach($events[$event_day] as $event) {
                        $calendar.= '<div class="event">'.$event['title'].'</div>';
                    }
                }
                else {
                    $calendar.= str_repeat('<p>&nbsp;</p>',2);
                }
            $calendar.= '</div></td>';
            if($running_day == 6):
                $calendar.= '</tr>';
                if(($day_counter+1) != $days_in_month):
                    $calendar.= '<tr class="calendar-row">';
                endif;
                $running_day = -1;
                $days_in_this_week = 0;
            endif;
            $days_in_this_week++; $running_day++; $day_counter++;
        endfor;
        /* finish the rest of the days in the week */
        if($days_in_this_week < 8):
            for($x = 1; $x <= (8 - $days_in_this_week); $x++):
                $calendar.= '<td class="calendar-day-np">&nbsp;</td>';
            endfor;
        endif;
        /* final row */
        $calendar.= '</tr>';

        /* end the table */
        $calendar.= '</table>';
        /** DEBUG **/
        $calendar = str_replace('</td>','</td>'."'n",$calendar);
        $calendar = str_replace('</tr>','</tr>'."'n",$calendar);
        /* all done, return result */
        return $calendar;
    }
    function random_number() {
        srand(time());
        return (rand() % 7);
    }
    /* date settings */
    $month = (int) ($_GET['month'] ? $_GET['month'] : date('m'));
    $year = (int)  ($_GET['year'] ? $_GET['year'] : date('Y'));

    /* "next month" control */
    $next_month_link = '<a href="#" class="monthnav" onClick="getNextMonth();return false;">Next &raquo;</a>';
    $heading ='<td colspan=5 class="month">$month_name $year</b></td>';
    /* "previous month" control */
    $previous_month_link = '<a href="#" class="monthnav" onClick="getPrevMonth();return false;">&laquo; Prev</a>';

    /* bringing the controls together */
    $controls = '<form method="get">'.$select_month_control.$select_year_control.$previous_month_link.$heading.'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'.$next_month_link.' </form>';
    /* get all events for the given month 
       I had to rewrite this query to get 
       anything usable out of the mysql 
       database we already had. */
    $events = array();
    $query = ("
      SELECT 
        event_title 
        AS title, 
        DATE_FORMAT( FROM_UNIXTIME(event_date), '%Y-%m-%d' ) 
        AS event_date 
      FROM 
        events
      WHERE 
        FROM_UNIXTIME(event_date) 
          LIKE '$year-%$month-%'");
    /* verify the query is correct 
    echo $query;
    echo "<hr />";
    echo "<br />";
     */

    $result = mysql_query($query,$conn) or die('error 2');
    while($row = mysql_fetch_assoc($result)) {
        $events[$row['event_date']][] = $row;
    /* verify that the query gets results. 
       Also generates a list of this months events*/
        /*echo $row['event_title']." ----- ".$row['event_date'];
        echo "<br />";*/
    }
    echo '<h2 style="float:left; padding-right:30px;">'.date('F',mktime(0,0,0,$month,1,$year)).' '.$year.'</h2>';
    echo '<div style="float:left;">'.$controls.'</div>';
    echo '<div style="clear:both;"></div>';
    echo draw_calendar($month,$year,$events);
    echo '<br /><br />';
    echo '</div>';
    ?>

    <html>
    <head>
    <link href="cal.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="proto.js"></script>
    <script type="text/javascript" language="javascript">
        var current_month = <?PHP echo $month ?>;
        var current_year = <?PHP echo $year ?>;
        function getPrevMonth()
        {
            if(current_month == 1)
            {
                current_month = 12;
                current_year = current_year - 1;
            }
            else
            {
                current_month = current_month - 1;
            }
            params = 'month='+current_month+'&year='+current_year;
            new Ajax.Updater('calendar_wrapper',window.location.pathname,{method:'post',parameters: params});
        }
            function getNextMonth()
            {
                if(current_month == 12)
                {
                    current_month = 1;
                    current_year = current_year + 1;
                }
                else
                {
                    current_month = current_month + 1;
                }
                params = 'month='+current_month+'&year='+current_year;
                new Ajax.Updater('calendar_wrapper',window.location.pathname,{method:'post',parameters: params});
            }
    </script>
    </head>
    <body>
    <div id="calendar_wrapper"><? /*?PHP draw_calendar($month,$year,$events = array());*/ ?>
    </body>
    </html>

您发布的代码没有包含定义"$month_name"的部分。此问题与$month_name设置不正确有关(很可能)。想做一些类似的事情:

function draw_calendar($month,$year,$events = array()){
    //set month name
    $month_name = date("F", mktime(0, 0, 0, $month, 10));
    //rest of your code

好吧,我是jQuery和PHP的新手,但我注意到了几件事:

1) 每次调用getNextMonth()getPrevMonth()后重新加载页面时,都会创建第二个"calendar_wrapper"div。我不熟悉Ajax.Updater,谷歌显示它是Prototype.js,而不是jQuery,对吧?为了解决这个问题,我的猜测是,您在Ajax.Updater中没有使用DOM语法引用calendar_wrapper。在getNextMonth()/getPrevMonth()内的Ajax.Updater调用中尝试"#calendar_wrapper"。如果您正在寻找等效于Ajax.Updater的jQuery,请查看$.ajax().

2) 您的"日期设置"部分让您的变量在GET全局数组($_GET['month'])中查找,但AJAX更新程序通过POST发送数据。这可能是PHP脚本正确返回数据,但没有正确更新变量的原因。

3) 我在您的代码中没有看到任何内容来选择月/年元素并使用从getPrevMonth()getNextMonth()收到的数据更新它们。为此,您可能需要一个事件处理程序来用新数据更新元素。例如,我会给你的第一个h2头一个id,然后让jQuery用从PHP收到的数据更新h2中的$.text()。然而,当PHP读取更新的$month变量时,您似乎正在寻求让它回显更新的HTML。如果是这样的话,希望通过解析生成两个calendar_wrapperdiv的页面来解决它