2014-02-10 138 views
1

我仍然是一個新的程序員,並且我得到這段代碼的工作(我從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的瀏覽器的屏幕截圖。 enter image description here

+0

你能提供從您的JavaScript控制檯輸出?如果您使用的是Chrome,則可以按F12訪問開發工具(在Windows上)。 –

+0

感謝您的建議。我發現我缺少jQuery.min.map,所以我把它放在那裏,儘管它沒有使它工作。看看我張貼的截圖,還有其他建議嗎? –

+0

如果您點擊該紅色失敗請求,並且轉到響應選項卡,那裏有什麼嗎? http響應代碼如何? –

回答

2

嘗試更換:

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!'); 
         } 
        } 
    ], 
+0

我剛剛也試過這個,實際上我在獲取事件時會出現「錯誤」,我從FALSE(Henrique建議的)中刪除了引號,沒有任何好處,仍然有錯誤。我猜的是JSON –

+0

這意味着頁面沒有返回數據 –

+0

這是否意味着PHP「events.php」文件有錯誤?我通過它運行頁面自我,它輸出JSON就好了,所以它不是SQL的問題。我把整個events.php文件放在我原來的文章中。 –

0

你有沒有考慮這一點考慮是

Month值是基於0 ,這意味着一月= 0,日= 1,等

http://arshaw.com/fullcalendar/docs/current_date/month/

所以 '2014-02-05',將於3月5日。

+0

約會然後不會出現在不同的月份 –

+0

是的如果這是yhe情況下,將在其他月份可見 –

+0

不是這樣,它顯示正確的月份數據@APaul –

0

而且修改此:

[ 
{ 
    "id": "7", 
    "title": "test", 
    "start": "2014-02-05 00:00:00", 
    "end": "2014-02-05 00:00:00", 
    "url": "", 
    "allDay": false <-- change this to false without quotes 
}, 
{ 
    "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" 
} 
] 
+0

我剛試過它我修改了PHP從FALSE去掉引號並檢查了JSON輸出,但仍然無法正常工作 –