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

时间:2013-11-20 15:20:06

标签: php jquery ajax

我正在制作一个简单的活动日历。当我第一次加载页面时,日历加载。然后,当我点击下一个或上一个时,它会将我带到下个月,但事件不会加载,月份标题不会更改,但会绘制正确的日历。我尝试从代码中获取我的事件脚本并将其放在控制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>

2 个答案:

答案 0 :(得分:0)

您发布的代码未包含定义'$ 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

答案 1 :(得分:0)

好的,我是jQuery和PHP的新手,但是我注意到了一些事情:

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

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

3)我的代码中没有看到任何内容来选择月/年元素,并使用从getPrevMonth()getNextMonth()收到的数据进行更新。为此,您可能需要一个事件处理程序来使用新数据更新元素。例如,我给你的第一个h2头一个id,然后让jQuery用你从PHP收到的数据更新h2里面的$.text()。但是,当您读取更新的$month变量时,看起来您正在寻求让PHP回显更新的HTML。如果是这种情况,希望解析制作两个calendar_wrapper div的页面将解决它。