我仍然是一個新的程序員,並且我得到這段代碼的工作(我從here得到)有問題。它使用MySQL來存儲數據。我想了解所有這些部分,但我現在纔開始理解ajax和jQuery是如何協同工作的。Fullcalendar沒有顯示數據
它用於顯示數據,它依賴於「events.php」。我已經單獨運行了它,它生成的JSON應該可以在日曆中顯示,所以我知道SQL工作正常,但它不會顯示在主頁面上。到庫,CSS等的路徑已被更改,但插入到MySQL表中的函數工作正常......所以我可以使用它來插入日期,但是一旦出現,它們不會顯示在刷新。
編輯:已解決。據我所知,有三個問題的組合:(1) - 確保返回的JSON沒有「false」引號。 (2)確保你有jquery.min.map。 (這是通過查看Chrome的調試器發現的),以及(3)我不能使用該文件的路徑......我只是將其稱爲「events.php」。感謝大家幫助!
下面是下面的html ...和下面的那個JSON。我看到其他幾個職位,從未有過的解決方案,所以很明顯,任何幫助,不勝感激:
<!DOCTYPE html>
<html>
<head>
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<script src='lib/jquery.min.js'></script>
<script src='lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "http://localhost/tpsdb/fullcalendar/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/tpsdb/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/tpsdb/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost/tpsdb/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
由events.php頁面生成的JSON:
[{"id":"7","title":"test","start":"2014-02-05 00:00:00","end":"2014-02-05 00:00:00","url":"","allDay":"false"},{"id":"8","title":"Title 2","start":"2014-02-06 00:00:00","end":"2014-02-06 00:00:00","url":"","allDay":"false"},{"id":"9","title":"Feb 1","start":"2014-01-28 00:00:00","end":"2014-01-28 00:00:00","url":"","allDay":"false"}]
下面是創建的PHP JSON根據正確的格式去除引號(true不會出現在我的JSON字符串中)。
<?php
// List of events
$json = array();
// Query that retrieves events
$requete = "SELECT * FROM evenement ORDER BY id";
// connection to the database
include ("../includes/functions.php");
// Execute the query
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
// sending the encoded result to success page
$tempjson = json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
$tempjson = str_replace('"false"', 'false', $tempjson);
echo $tempjson;
?>
在我的傳奇更多信息 - 它可以幫助那些在我的後塵:顯然這是所提供的lib不包括jquery.min.map(我還沒有研究那是什麼)。感謝您詢問Chrome中的f12控制檯。我看到min.map丟失了。仍然沒有幫助我,雖然:(工作...
這裏是Chrome的瀏覽器的屏幕截圖。
你能提供從您的JavaScript控制檯輸出?如果您使用的是Chrome,則可以按F12訪問開發工具(在Windows上)。 –
感謝您的建議。我發現我缺少jQuery.min.map,所以我把它放在那裏,儘管它沒有使它工作。看看我張貼的截圖,還有其他建議嗎? –
如果您點擊該紅色失敗請求,並且轉到響應選項卡,那裏有什麼嗎? http響應代碼如何? –