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正在运作，特定教师＆＃39;正在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

在Collections.sort col, New CReverseComparator代码中，您也可以将第二个参数作为URL发送。如果以URL的形式给出，它将自动启动Ajax调用。所以你可以把它写成：

$('#calendar').fullCalendar('addEventSource', json);

完成上述操作后，您需要使用$ _GET而不是$ _POST来获取find_event.php中的数据。

或者，您只需在$('#calendar').fullCalendar('addEventSource', 'find_event.php?str=' + +encodeURIComponent(str) ); $('#calendar').fullCalendar( 'refetchEvents');代码下添加此行，即可：

addEventSource

我们使用上述方式（第一个）使用Ajax过滤器进行全日历安装。

<强>解决方案：

您的当前函数在find_event.php调用后再启动一个ajax调用：

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

这是控制台中发生的事情：http://screencast.com/t/gUUconTtK。

您可以将功能更改为：

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); 
             }
      });
   }`

这确保只进行一次通话＆amp;事件从文件填充到日历上。使用上面的函数，这就是我的JSON输出的样子：http://screencast.com/t/l3H2pJguM。这是从下拉列表中选择值后我的日历显示的方式：http://screencast.com/t/oWrd4bj5pV。

使用您的功能，虽然我在JSON响应中正确查看了我的事件，但日历显示为空白。

请注意，我所展示的是测试活动。

Answer 2

让我们按照代码中的str变量进行操作。

在$("#teachermale").change()中，您可以在所选的每个选项上循环创建str变量并获取其文本。

str现在是所选名称的“聚合”（没有分隔符，顺便说一下......所以它看起来像“Sherif RedaMohamed ShahbanAbdul TawabAhmed Ghanim”）然后传递给{{1 }}

它被“视为”changeDisplay(str)（http://www.w3schools.com/jsref/jsref_encodeuricomponent.asp）值，并以encodeURIComponent的形式发送给$_POST[data]。

假装你的控制台日志是正确的相关错误，你的问题真的很奇怪 .oO（我想不是）
因为地址不符合显示的代码（str变量）......并且该方法也不适合。

为什么要触发与变更处理程序链接的find_event.php？

与您发布的代码相关，您应该在网址change上查找POST的控制台状态看起来您的脚本中存在多个问题 ; /
希望它无论如何都有帮助。

Answer 3

您可能希望像这样使用Jquery $.parseJSON()：

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

JSON结果不显示fullcalendar中的选定事件

3 个答案: