JSON結果不是從fullcalendar顯示所選事件

Question

我有一個HTML選擇框，允許選擇基於老師的事件管理員選擇

 <select id="teachermale" name="teachermale"> 
     <option selected disabled>Male Teachers</option> 
     <option value="Mohamed Adil">Mohamed Adil</option> 
     <option value="Sherif Reda">Sherif Reda</option> 
     <option value="Mohamed Shahban">Mohamed Shahban</option> 
     <option value="Abdullah al Haiti">Abdullah al Haiti</option> 
     <option value="Salah">Salah</option> 
     <option value="Ahmed Nabil">Ahmed Nabil</option> 
     <option value="Abdul Tawab">Abdul Tawab</option> 
     <option value="Mahmoud Mahmoud">Mahmoud Mahmoud</option> 
     <option value="Ahmed Ghanim">Ahmed Ghanim</option> 
     </select> 

而下面的jQuery刪除從jQuery fullcalendar所有時事顯示特定教師的事件。並建立ajax請求以從數據庫中獲取相應教師的事件。

 $(function() { 
     $("#teachermale").change(function(){ 
        var str = ""; 
        $("#teachermale option:selected").each(function(){ 
         str += $(this).text() + ""; 
        }); 

        console.log(str); 
        $('#calendar').fullCalendar('removeEvents'); 
        changeDisplay(str); 


       }).change(); 

     }); 
     function changeDisplay(str){ 
     console.log(str); 
     $.ajax({ 
       url:'find_event.php', 
       type:'POST', 
       data : '&str='+encodeURIComponent(str), 
       dataType:'text', 
       success: function(json) { 
        $('#calendar').fullCalendar('addEventSource', json); 
       }, 
       error: function(xhr, textStatus, errorThrown) { 
        alert(xhr.responseText); 
       } 
      }); 

     } 

POST正在工作，特定教師的事件正在JSON中正確提取。

而以下是獲取事件的find_event.php腳本。

  // List of events 
      $json_array["title"]=$_POST["str"]; 
      $title =$json_array["title"]; 
      echo $title; 

      // connection to the database 
      try{ 

        $pdo = new PDO('mysql:host=localhost;dbname=*******', '******', '*******'); 
       } catch(Exception $e) { 

       exit('Unable to connect to database.'); 
      } 

      $requete = "SELECT * FROM `evenement` WHERE `title`=?"; 
      // Prepare your query 
      $stmt = $pdo->prepare($requete); 
      if ($stmt) { 
       if ($stmt->execute(array($title))) { 
        $events = array(); 
        $dbEvents = $stmt->fetchAll(PDO::FETCH_ASSOC); 
        foreach ($dbEvents as $event) { 
         $event['allDay'] = false; 
         $events[] = $event; 
        } 
       } else { 
        // check for error 
        print_r($stmt->errorInfo()); 
       } 
      } 

      echo json_encode($events); 

控制檯記錄字符串（即標題），並在網絡選項卡顯示str已過帳。但我似乎無法讓日曆顯示在屏幕上，即使我使用$('#calendar').fullCalendar('addEventSource', json);來成功回收json源中的事件。

任何關於如何檢查這個或如何讓事件顯示的輸入將不勝感激。當的console.log是在它做

JSON響應： Salah[{"id":"24","title":"Salah","start":"2016-06-02 10:00:00","end":"2016-06-02 14:30:00","url":null,"allDay":false,"color":null},{"id":"26","title":"Salah","start":"2016-06-23 08:30:00","end":"2016-06-23 11:30:00","url":null,"allDay":false,"color":"green"}]

這裏是請求頭看怎麼樣。

Answer 1

在$('#calendar').fullCalendar('addEventSource', json);代碼，您可以發送第二個參數作爲網址爲好。如果這是以URL的形式給出的，它將自行啓動一個Ajax調用。所以，你可以把它寫成：

$('#calendar').fullCalendar('addEventSource', 'find_event.php?str=' + +encodeURIComponent(str)); $('#calendar').fullCalendar('refetchEvents');

一旦你做到上面，你將需要$ _GET代替$ _POST來獲取在find_event.php數據。

或者，你可以簡單地添加下面的addEventSource這行代碼，所以它看起來像：

success: function(json) { $('#calendar').fullCalendar('addEventSource', json); $('#calendar').fullCalendar('refetchEvents'); },

我們與阿賈克斯工作fullcalendar安裝濾波器採用上述方式（一日一）。

解決方案：

您當前的功能開始多了一個Ajax調用後find_event.php電話：

function changeDisplay(str){ 
console.log(str); 
    $.ajax({ 
      url:'find_event.php', 
      type:'POST', 
      data : '&str='+encodeURIComponent(str), 
      dataType:'text', 
      success: function(json) { 
       $('#calendar').fullCalendar('addEventSource', json); 
      }, 
      error: function(xhr, textStatus, errorThrown) { 
       alert(xhr.responseText); 
      } 
     }); 
    }` 

這是在控制檯中會發生什麼：http://screencast.com/t/gUUconTtK。

你可以改變你的函數：

function changeDisplay(str){ 
    console.log(str); 
    $('#calendar').fullCalendar('addEventSource', 'find_event.php?str=' + encodeURIComponent(str)); 
} 

這將確保只有一個調用時&的事件從文件填充到日曆。使用上面的函數，這就是我的JSON輸出的樣子：http://screencast.com/t/l3H2pJguM。從下拉菜單中選擇一個值後，這就是我的日曆顯示方式：http://screencast.com/t/oWrd4bj5pV。

雖然我在JSON響應中正確地看到自己的事件，但日曆顯示爲空白，但您的功能仍然如此。

請注意，我所展示的是測試事件。

Answer 2

讓我們按照您的代碼中的str變量。

在$("#teachermale").change()中，您通過選擇每個選項的循環創建str變量並獲取它的文本。

str至極現在是一個選擇的名稱的「聚合」（無定界符，順便說一句...所以它看起來像「謝里夫RedaMohamed ShahbanAbdul TawabAhmed加尼姆」）隨後被傳遞到changeDisplay(str)

這是「認爲」爲encodeURIComponent（http://www.w3schools.com/jsref/jsref_encodeuricomponent.asp）值並且作爲$_POST[data]發送至find_event.php。

假裝你控制檯日誌是正確的相關錯誤，你的問題真的很奇怪。
.oO（我想不是）
因爲地址不符合顯示的代碼（str變量）...並且該方法也不適合。

爲什麼你會觸發change鏈接變更處理程序？

與您的發佈代碼相關，您應該在url find_event.php上查找POST的控制檯狀態。
它看起來像腳本中有多個問題。
;/
無論如何希望它有幫助。

Answer 3

您可能需要使用jQuery $.parseJSON()像這樣：

success: function(data) { 
    var json = $.parseJSON(data); 
    $('#calendar').fullCalendar('addEventSource', json); 
}