0

I'm trying to implement to my Calendar the eventReceive method for being able to drag & drop an external event to my calendar and register it in a database. The problem is that when i post the following set of values corresponding to the event in JSON via a POST request, the status is to 200 and it seems like it work but the response that i got from my php script that is receiving the post request and values is an empty array. If you have any idea, thanks for answering.

EventReceive :

eventReceive: function(info){

    var formateur = '<?= $_SESSION['prenomNom']?>';
    var domaine = '<?= $_SESSION['domainePrincipalUUID']?>';
    var idParent = info.event.extendedProps.idParent;
    var title = info.event.title + ' - ' + formateur ;
    var titreSeul = info.event.title;
    var DateStart = info.event.start.toISOString().substring(0,10);
    var heureStart = info.event.start.toString().substring(16,24);
    var DateEnd = info.event.start.toISOString().substring(0,10);
    var heureEnd = info.event.start.toString().substring(16,24);
    var color = rgb2hex(info.event.extendedProps.colorParent);
    var colorTexte = rgb2hex(info.event.extendedProps.colorTexte);
    heureEnd = heureEnd.split(':');
    heureEnd2 = parseInt(heureEnd[0],10) + 1;
    heureEnd = heureEnd2 +":"+ heureEnd[1] +":"+ heureEnd[2];
    
    var data = JSON.stringify({
      "title":title,
      "titreSeul":titreSeul,
      "DateStart":DateStart,
      "heureStart":heureStart,
      "DateEnd":DateEnd,
      "heureEnd":heureEnd,
      "idParent":idParent,
      "color":color,
      "colorTexte":colorTexte,
      "domaine":domaine
    });
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST','/Formateurs_PA/Planning_V5/Controller/creer_Event.php', true );
    xhr.setRequestHeader("Accept", "application/json");
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        info.event.remove();
        calendar.refetchEvents();
        refreshExternalEvent();
      }
    };
    xhr.send(data);
  },

console.log of the request in Firefox console.log of the request in Firefox

Here is the start of my php script where i'm just trying to display the value of my $_POST :

<?php

header('Access-Control-Allow-Origin: *');

session_start();

$id = $_SESSION['id'];
$dossier = $_SESSION['dossierFormateur'];
require_once 'FileMaker.php';
  
$fm = new FileMaker('PA-FullCalendar');
$fm->setProperty('username', '*****');
$fm->setProperty('password','*****');

$debut = date_create($_POST['DateStart']);
$fin = date_create($_POST['DateEnd']);
$debut = date_format($debut, 'm/d/Y');
$fin = date_format($fin, 'm/d/Y');
$domaine = $_POST['domaine'];

var_dump($_POST);

and here the result on webpage :

script php result

I specify that i'm using vanilla JS for my request and not jQuery because i have to.

Edit : I show here the xhr options from my calendar webpage. xhr request

RESOLVE

Archok
  • 31
  • 3
  • 1
    We can't see how the PHP is trying to process the request. – Quentin Jan 25 '22 at 11:14
  • What have you tried to resolve the problem? Where are you stuck? The network console marked that request as a GET request, not as a POST one – Nico Haase Jan 25 '22 at 13:20
  • I have tried $data = file_get_contents('php://input'); echo $data; But it also display nothing – Archok Jan 25 '22 at 13:21
  • As an aside: why have you added `header('Access-Control-Allow-Origin: *');`? You don't seem to be making a cross-origin request in your XHR code. – ADyson Jan 25 '22 at 15:27
  • Why are you expecting anything to display on the page from your `echo $data`? You haven't written anything in your XHR code which would output anything to the page (aside from refreshing the fullcalendar events). It's unclear how you're seeing the input you've put in your screenshot, unless it's happening when you first load the same creer_Event.php page via a GET (in which case, there's no reason to expect any $_POST or php://input data to be present). Unlsss you've cut something off from the screenshot of your network tool, then it looks like your XHR POST request is never even happening... – ADyson Jan 25 '22 at 15:32
  • ....have you done any debugging using the JavaScript debugger and/or the console, to see if the code is being executed and/or whether there are any other errors? – ADyson Jan 25 '22 at 15:33
  • Also if you set `xhr.setRequestHeader("Accept", "application/json");`, then your AJAX may not like receiving var_dump output, you should comment that out while testing, and also write some code to actually alert or log the dumped data to the console, or something, then you could see the actual output from running the PHP as a result of the XHR - once you get it to actually execute, of course. – ADyson Jan 25 '22 at 15:35
  • Thanks you for your answers. So i added the cross-access because i read somewhere that it could help but it don't. The idea is that the method eventReceive trigger the POST request that will send the value of the event that i dropped onto my calendar TO -> the php script that will create the event in my database with the values of the request and then i refresh my calendar to display it. Maybe i'm on the wrong way idk. I have the constraint to do it without jQuery so it doesn't help because i don't know well vanilla js. – Archok Jan 25 '22 at 15:50
  • `i added the cross-access because i read somewhere that it could help`...did you read exactly what it can help with? It's only intended to help with certain specific CORS errors, which there's no evidence that you would be experiencing. Don't become a [cargo-cult programmer](https://en.wikipedia.org/wiki/Cargo_cult_programming). Only add code whose purpose you have a clear understanding of! – ADyson Jan 25 '22 at 17:07
  • 1
    FYI `fetch()` is generally easier to use then `XmlHttpRequest`, if you're restricted to vanilla JS. (Although, there are other libraries than jQuery which can also make AJAX requests, if you're allowed to use things other than jQuery. e.g. axios is very popular, and there are others. Ultimately though, they are all just syntactic sugar which make calls their calls via XHR or fetch under the hood, because those are the only two ways to actually initiate an ajax request in a browser.) – ADyson Jan 25 '22 at 17:09
  • 1
    `The idea is that the method eventReceive trigger the POST request that will send the value of the event that i dropped onto my calendar TO -> the php script`...yes, it's clear what the idea is. But if that's not happening then, as I mentioned before, you need to **do some debugging** to find out why it's not. I can see that you've attempted some, but I don't think you've traced it back far enough. Next, you need to work out whether the `eventReceive` callback is actually running at all when your event is dropped. Even adding a simple `console.log` in the callback would help to show you that. – ADyson Jan 25 '22 at 17:12
  • 1
    If the eventReceive callback is not being triggered, then obviously your ajax call will not run. So then you'd be dealing with a problem which is different (and additional to) the one we've been discussing here (which is still true - you still need to amend your PHP code to receive the JSON correctly). – ADyson Jan 25 '22 at 17:13
  • Also, I would still recommend to check why you expect that a POST request happens, while your screenshot clearly shows that a GET request happens – Nico Haase Jan 26 '22 at 07:12
  • 1
    Thanks again for those very convenient answers. For the cargo-cult programmer I agree with the fact that I was just hoping for a quick solution to my problem with a single line but actually it's not so simple. I'm going to try another way to make a call Ajax because XmlHttpRequest is not so easy to handle. I will deepen the debugging by following the good advice you gave me like the callback in the event receive. I will come back to you to share the progress thanks again – Archok Jan 27 '22 at 08:56
  • 1
    Thanks for the extra screenshot. So that seems to show that the XHR POST request is now happening. Good. Now you need to move to the Response tab in that entry and look at what you are seeing there, to understand what PHP is sending back. I don't expect it to show anything useful until you change the PHP code to receive the JSON input correctly and then echo it correctly. – ADyson Jan 27 '22 at 11:54
  • The response tab is empty, but i don't uderstand what you mean by "change the php code to receive the JSON input correctly" because in the first place i'm just trying to display the values stored in $_POST that are sent by the AJAX call, but it seems like the php is not even receiving the json of value that i send on the request header. If you could enlighten me on how to do it thank you. – Archok Jan 27 '22 at 13:05
  • 1
    "The response tab is empty" - completely empty? It doesn't even contain the dump of that empty `$_POST` array? – Nico Haase Jan 27 '22 at 13:11
  • 1
    `i'm just trying to display the values stored in $_POST that are sent by the AJAX`...did you read the question yours is marked as a duplicate of? When your XHR request sends JSON with a content-type of application/json, PHP does not put the data into $_POST. Instead you have to get it from php://input and use json_decode to put it into a separate variable, and then to display it you'd have to json_encode it again, and echo that. $_POST is not involved. Therefore, you have to change your code to match that fact. – ADyson Jan 27 '22 at 13:29
  • 1
    Thanks a lot @ADyson i edited the post and you can see that with all your good advices I finally manage to display the values of the request on my php script ! I just have to change the $_post['value’] to $data[‘value'] and it should be working thanks again for your help ! – Archok Jan 27 '22 at 13:41

0 Answers0