Uncaught SyntaxError: Unexpected token < in JSON at position 1

Engine_Jack_Hammer · May 1, 2019, 2:35am

Uncaught SyntaxError: Unexpected token < in JSON at position 1 error on google chrome. I’m trying out the gantt on slimframework … but couldnt move forward due to this issue.

I looked up on the eror and it led me here who seems to have the same issue
Uncaught SyntaxError but OP seems to have resolved it but has not posted the solution. Help would be much appreciated.

Thanks

guldmi · May 2, 2019, 2:52pm

Hi @Engine_Jack_Hammer!

Most likely, this error is caused by an incorrect server response for gantt.load request,
For example, here is how I can reproduce it:
Gif: http://recordit.co/0bB5WlHiLL

You can follow these steps and check what is actually returned from your backend when gantt requests the data:
https://docs.dhtmlx.com/gantt/desktop__troubleshooting.html#checkwhatisrequestedbytheclient

Please check the server response and tell me what you see.

Engine_Jack_Hammer · May 2, 2019, 3:07pm

here is the screen shot of the response

guldmi · May 3, 2019, 10:14am

Hi @Engine_Jack_Hammer !

I can see that the response has a not expected Content-Type. You’re getting text/html while it should be application/json.
Looks like your backend returns something different from the expected data response.
But I can’t see it on your screenshot.

Can you please open the request in the network panel, as you did before and open either Preview or Response tab?

Engine_Jack_Hammer · May 3, 2019, 10:52am

its blank

Aliaksandr · May 3, 2019, 12:08pm

Hi,
Can see the content length on your previous screenshot is 896 bytes (which means the server response is not empty) https://www.screencast.com/t/ce0YhyQ3ec52
The Preview tab doesn’t show any visible content, but can you also look at the raw response content (open the Response tab), and check what’s in it? It may give a clue to what’s going on.
You may also want to enable php error reporting:
https://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display
and look the request again, it may contain server error message this time.

Overall, the problem may be either in route or in the handler - either this request is not getting directed to the appropriate handler, or that handler doesn’t do what it’s supposed to.

Please check that you have a route defined:

github.com

DHTMLX/gantt-howto-php/blob/master/src/routes.php#L9


<?php
// Routes


$app->get('/', function ($request, $response, $args) {
	// Render index view
	return $this->renderer->render($response, 'index.phtml', $args);
});


$app->get('/data',  'getGanttData');


$app->post("/data/task", 'addTask');
$app->put("/data/task/{id}", 'updateTask');
$app->delete("/data/task/{id}", 'deleteTask');


$app->post("/data/link", 'addLink');
$app->put("/data/link/{id}", 'updateLink');
$app->delete("/data/link/{id}", 'deleteLink');

And then check the handler that is supposed to be called by that route:

github.com

DHTMLX/gantt-howto-php/blob/master/src/gantt.php#L11


<?php
function getConnection()
{
	return new PDO("mysql:host=localhost;dbname=gantt", "root", "", [
		PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
		PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
	]);
}


function getGanttData($request, $response, $args) {
	$db = getConnection();
	$result = [
		"data" => [],
		"links" => []
	];


	foreach($db->query("SELECT * FROM gantt_tasks ORDER BY sortorder ASC") as $row){
		$row["open"] = true;
		array_push($result["data"], $row);
	}

Does everything look as expected?
If you can debug code execution step by step - that should be the next step, once you debug the getGanttData function you should be able to see where it fails.
If you can’t do it, then you’ll probably have to proceed to the time-proven echo debug: https://stackoverflow.com/questions/11294379/php-debug-echos - add some echo/print statements in your code to ensure that the code is executed properly

Engine_Jack_Hammer · May 3, 2019, 12:28pm

Yes thats the same thing i got. I followed the instruction on https://docs.dhtmlx.com/gantt/desktop__howtostart_php.html?_ga=2.143132668.818674121.1556654752-1068358847.1554374646 to the T. I’m on Slimframework running apache … I have tried the slim only wihout apache but yeilds the same result. I have also tried update --no-dev… but the result is the same.

From what I can understand the function getGanttData($request, $response, $args) on gantt.php did not get called at all.

Aliaksandr · May 4, 2019, 9:23am

Well, I don’t have any obvious solution.

First thing, I’d make sure whether the route works at all.
The simplest thing would be to change getGanttData to this (echo text message and immediately exit the script)

function getGanttData($request, $response, $args) {
   echo "HI!";
   die;
}

Then open the data url in the browser.
If I’m not mistaken you use a local domain, so you can access the following:

http://slim.io/data

If nothing appears on the screen - you’ll know there is something wrong with the route.
If you’ll see the text - it would mean the issue with getGanttData function.
I think it’s the latter since otherwise, you’d either have had 404 error or some other pages result, in case the request is captured by a different route.

To do a quick check of that, you can enable php error reporting and add some echo calls to getGanttData - just add messages after every important step of the method:


<?php

// ! important
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// ! important

function getConnection()
 {
	return new PDO("mysql:host=localhost;dbname=gantt", "root", "", [
		PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
		PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
	]);
}

function getGanttData($request, $response, $args) {
        echo "enter the method<br>"; // !!!
        ob_flush(); // !!!

	$db = getConnection();
        echo "create connection<br>"; // !!!
        ob_flush(); // !!!
	$result = [
		"data" => [],
		"links" => []
	];

	foreach($db->query("SELECT * FROM gantt_tasks ORDER BY sortorder ASC") as $row){
		$row["open"] = true;
		array_push($result["data"], $row);
	}
	echo "select tasks<br>"; // !!!
	ob_flush(); // !!!
	///...

then open the action url in the browser again and check what is displayed

http://slim.io/data

Do you see all messages, or only some messages (it will give you a clue where the code fails with an error), or do you see no messages at all?