Geek asks and answers

AJAX and PHP page processing - not playing together

This is a continuation of the previous publication, where the main questions that I have focused around FullCalendar. Now I have narrowed down the suspects to a problem between my main page and the PHP page that retrieves the data.

The events.php page returns data just fine when I run it on my own, so there is no problem with the inner page. All problems with JSON were developed, so the returned data is fine (I just put it in the “Events” line. Also, when in Chrome and I click on the error, then the “answer” tab is in (F12), it says: “The request is not has the available response data. "Just copy the query string to the URL and paste it into the Chrome address bar, the PHP file will return the data simply.

So, here are three parts: my main page, PHP, and a screenshot of Chrome. ANY understanding of how I can fix this? Pleeeeease ... :)

- HERE permission. Unlike the code I received ( here ), I should not have used "localhost: 8888 / fullcalendar / events.php". I even tried " http://mydomain.com/tpsdb/fullcalendar/events.php " and it didn't work. SO .... I just used "events.php" and it works !! Thanks guys for the help! I am not very familiar with cross-domain security, but the source paths were correctly printed (I checked a dozen times) ...

<!DOCTYPE html>
<html>
<head>
    <link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.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'
                },

                eventSources: [
                    {
                        url: 'http://localhost:8888/tpsdb/fulcalendar/events.php',
                        type: 'GET',
                        data: {},
                        error: function () {
                            alert('There was an error while fetching events!');
                        }
                    }
                ],

                // 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:8888/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:8888/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:8888/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>

Now a PHP page called "events.php"

<?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;

?>

And finally, a screenshot ... Chrome Screenshot

+3
source
2

/fullcalendar/update _events.php host:. , ajax. , .

, , fullcalendar/update_events.php tpsdb?

, , Access-Control-Allow-Origin php

+2

dataType: "json" / PHP , json:

//PHP
header('Content-Type: application/json');

//Javascript
eventSources: [
                {
                    url: 'http://localhost:8888/tpsdb/fulcalendar/events.php',
                    type: 'GET',
                    data: {},
                    dataType: 'json',   //<-- add this line
                    error: function () {
                        alert('There was an error while fetching events!');
                    }
                }
            ],
0

More articles:


All Articles