使用 JQuery 在 fullcalendar 中保存事件不起作用

Question

我想將事件保存到數據庫中，但是我可以將事件添加到日歷中，但它不會保存到數據庫中，當我嘗試刷新頁面時，事件消失了。

這是我的索引頁

eventRender: function (event, element, view) {
        if (event.allDay === 'true') {
            event.allDay = true;
        } else {
            event.allDay = false;
        }
    },
    //changes made start 
   selectable: true,
    selectHelper: true,
    //editable: true,
   select: function (start, end, allDay) {
       var title = prompt('Event Detail:');

        if (title) {
             var start = $.fullCalendar.moment(start);
     var end = $.fullCalendar.moment(end);
     console.log("Event Triggered");
            //start = moment(start).format('YYYY/MM/DD');
        //end = moment(end).format('YYYY/MM/DD');
           // var start =  $.formatDate(start, "Y-MM-DD");
           //var end =  $.formatDate(end, "Y-MM-DD");
           //var time = $.formatTime(time, "HH:mm:ss");

            $.ajax({
                url: 'add_event.php',
                data:'title='+ encodeURIComponent(title)+
                   '&start='+ encodeURIComponent(start)+
                   '&end='+ encodeURIComponent(end),
                   //'&url='+ encodeURIComponent(url),
                type: "POST",
                dataType: 'text',
                success: function(json) {
                    alert("Added Successfully");
                  //  alert(json);                   
                  },
              error: function(xhr, textStatus, errorThrown) {
                 alert(xhr.responseText);
            }
            });

            calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
            true //make the event stick 
                    );
        } 
        calendar.fullCalendar('unselect');
    }, 

這是我將事件添加到數據庫的頁面

$data = $_POST;

$json_array["title"]=json_decode($data["title"], true);
$json_array["start"]=json_decode($data["start"], true);
$json_array["end"]=json_decode($data["end"], true);

$title =$json_array["title"];
$start =$json_array["start"];
$end = $json_array["end"];

 require_once "config.php";

try 
 {
$pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username,   $password);
// set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// prepare sql and bind parameters

$sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end)";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':title', $title);
$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end);
$stmt->execute();

echo "New records created successfully";
}
 catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
$pdo = null;

任何幫助都將不勝感激，我在網上到處尋找解決方案並使用代碼，但似乎沒有任何效果。

Answer 1

config.php 應包含您的憑據，例如：

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";

在數據庫中插入新行的腳本應該是：

ini_set('display_errors', 1); 
ini_set('log_errors',1); 
error_reporting(E_ALL); 

$data = $_POST;

$json_array["title"]=json_decode($data["title"], true);
$json_array["start"]=json_decode($data["start"], true);
$json_array["end"]=json_decode($data["end"], true);

$title =$json_array["title"];
$start =$json_array["start"];
$end = $json_array["end"];

require_once "config.php";

try 
{
    $pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
// set the PDO error mode to exception
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// prepare sql and bind parameters

    $sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end)";
    $stmt = $pdo->prepare($sql);
    $stmt->bindParam(':title', $title);
    $stmt->bindParam(':start', $start);
    $stmt->bindParam(':end', $end);
    $stmt->execute();

    echo "New records created successfully";
}
catch(PDOException $e)
{
    echo "Error: " . $e->getMessage();
}
$pdo = null;

Answer 2

那么，當您添加新事件時，數據是否真的保存在數據庫中？

如果我正在查看代碼，似乎您將 AJAX 調用作為 POST 發送，但將數據作為 GET 格式放置，雖然這可能有效，但以這種方式發送數據可能更好：

$(document).ready(function () 
{
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay,month'
        },
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true,
        minTime: '13:00:00', /* calendar start Timing */
        maxTime: '24:00:00',  /* calendar end Timing */
        defaultView: 'agendaWeek',
        events: "all_events.php",
        displayEventTime: false,
        eventRender: function (event, element, view) {
            if (event.allDay === 'true') {
                event.allDay = true;
            } else {
                event.allDay = false;
            }
        },
        //changes made start 
        selectable: true,
        selectHelper: true,
        //editable: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Detail:');

            if (title) {
                var dbstart = $.fullCalendar.moment(start).format();
                var dbend = $.fullCalendar.moment(end).format();
                console.log("Event Triggered");
                console.log(dbstart);
                console.log(dbend);
                //start = moment(start).format('YYYY/MM/DD');
                //end = moment(end).format('YYYY/MM/DD');
                // var start =  $.formatDate(start, "Y-MM-DD");
                //var end =  $.formatDate(end, "Y-MM-DD");
                //var time = $.formatTime(time, "HH:mm:ss");

                $.ajax({
                    url: 'add_event.php',
                    data: {
                        title: title,
                        start: dbstart,
                        end: dbend
                        //url: url
                    },
                    type: "POST",
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == "success") {
                            alert("Added Successfully");
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: response.title,
                                    start: response.start,
                                    end:   response.end,
                                    allDay: response.allDay
                                },
                                true //make the event stick 
                            );
                        } else {
                            alert("Error occurred. Check Console.");
                            console.log(response.error);
                            //  alert(json);                
                        }
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        alert(xhr.responseText);
                    }   
                });
                calendar.fullCalendar('unselect');
            }
        }
    });
});

然后，您的 add_event.php 將具有：

$title = $_POST['title'];
$start = $_POST['start'];
$end   = $_POST['end'];

require_once "config.php";

try 
{
    $pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username,   $password);
    // set the PDO error mode to exception
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // prepare sql and bind parameters

    $sql = "INSERT INTO events (title, start, end) VALUES (:title, :start, :end)";
    $stmt = $pdo->prepare($sql);
    $stmt->bindParam(':title', $title);
    $stmt->bindParam(':start', $start);
    $stmt->bindParam(':end', $end);
    $stmt->execute();

    $id = $pdo->lastInsertId();
    $output['status'] = "success";
    $output['insert_id'] = $id;
    $output['title'] = $title;
    $output['start'] = $start;
    $output['end'] = $end;
}
catch(PDOException $e)
{
    // had errors
    $errors = $stmt->errorInfo();
    $output['status'] = "error";
    $output['error'] = $e->getMessage();
}
$pdo = null;

echo json_encode($output);

這會向您的頁面提供一些輸出，以便您可以查看傳遞到腳本中並用於輸入到數據庫中的內容。 我還更新了您的 Ajax 調用，以便僅在成功輸入數據庫時​​更新日歷，並使用從函數返回的值進行更好的驗證。

然而，在生產中，一些錯誤輸出應該被刪除。