Fullcalendar不显示数据 [英] Fullcalendar not showing data
问题描述
我还是一个新的程序员，我有一个问题让这片code的工作（我来自的这里）。它使用MySQL来存储数据。我想了解所有的各个部分这一点，但我只是现在真的开始了解Ajax和jQuery的共同努力。
I'm still a new programmer, and I have a problem getting this piece of code to work (that I got from here). It uses MySQL to store the data. I would like to understand all the various parts to this, but I'm just now really starting to understand how ajax and jQuery work together.
它的显示数据，它依赖于events.php。我已经单独运行，并生成JSON应该工作在日历显示，所以我知道SQL工作正常，但它不会显示在主页上。该路径库，CSS等已经改变，但功能要插入MySQL表工作正常。所以我可以用它来插入日期，但一旦发生，他们不上露面刷新。
It for displaying data, it relies on "events.php". I have run that separately, and it generates JSON that should work for display in the calendar, so I know the SQL works fine, but it won't display on the main page. The paths to the libraries, CSS, and so on have been changed, but the function to insert into the MySQL table works fine... So I can use this to insert dates, but once there, they don't show up on a refresh.
编辑：解决。三个问题的组合，只要我可以告诉：（1） - 确保返回的JSON没有围绕假的报价。 （2）请确保您有jquery.min.map。 （这是发现了通过查看浏览器的调试器），和（3）我不能使用该文件的路径...我只是把它称为events.php。感谢大家的帮助！
下面是下面的HTML ......再下面的JSON。我见过一对夫妇的其他职位，从未有过的解决方案，所以很明显，任何帮助非常AP preciated：
Here's the html below... and below THAT, the JSON. I have seen a couple other posts that never had solutions, so obviously, any help GREATLY appreciated:
<!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：
The JSON generated by the events.php page:
[{"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"}]
下面是一个创建的JSON剥离出报价按照正确的格式（真的没有出现在我的JSON字符串）。
Here's the PHP that creates the JSON to strip quotes out as per proper format (true doesn't appear in my JSON string).
<?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失踪。还没有帮我虽然:(工作...
More info in my saga - may it help those following in my footsteps: apparently the lib that was provided doesn't include jquery.min.map (I have yet to research what that is). Thanks for asking about the f12 console in Chrome. I saw that the min.map was missing. Still hasn't helped me though :( Working...
下面是截图Chrome的浏览器中。
Here is the screen shot of Chrome's viewer.
推荐答案
尝试替换：
events: "http://localhost/tpsdb/fullcalendar/events.php",
与
eventSources: [
{
url: 'http://localhost/tpsdb/fullcalendar/events.php',
type: 'GET',
data: {},
error: function () {
alert('There was an error while fetching events!');
}
}
],
这篇关于Fullcalendar不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
