2

i'am lost here, i'm working on a game which will need to make a call to the server to inisiate the game and register the user and get some game data. but upon making the call to start game nothing happens and i keep getting this error message. i have already validated the json response i get from the server. below is my code please help :(

JSON

{
    "message": "Game started",
    "code": 200,
    "status": "success",
    "user_session_id": "217c7a4759388ae0af80bdf7668e4bf5",
    "points": 0,
    "dataBN4": {
        "1": {
            "number_id": 181,
            "guess_number": 183
        },
        "2": {
            "number_id": 182,
            "guess_number": 968
        },
        "3": {
            "number_id": 183,
            "guess_number": 742
        },
        "4": {
            "number_id": 184,
            "guess_number": 986
        },
        "5": {
            "number_id": 185,
            "guess_number": 230
        },
        "6": {
            "number_id": 186,
            "guess_number": 580
        },
        "7": {
            "number_id": 187,
            "guess_number": 648
        },
        "8": {
            "number_id": 188,
            "guess_number": 691
        },
        "9": {
            "number_id": 189,
            "guess_number": 424
        },
        "10": {
            "number_id": 190,
            "guess_number": 85
        }
    }
}

Jquery:

function startNewGame() {
    $('#game').html(activeHtml);
    n_url = gameBaseUrl + 'action=start_game';
    $.ajax({
        dataType: "JSON",
        url: n_url,
        success: function(data){
            userSessionId = data.user_session_id;
            answersObject = data.dataBN4;
        }

    }).done(function(){
        resortAnswers();
        createAnswers();
    });
    /*
    $.getJSON(url, {}, function (data) {
        userSessionId = data.user_session_id;
        answersObject = data.dataBN4;
    }).done(function () {
        resortAnswers();
        createAnswers();
    });
    */
}

PHP generates json;

<?php
ob_start();
        //make db entries and loges to data array
        $data['message'] = 'game started';
        $data['status'] = 'success';
        $data['code'] = 200;
        $data['points'] = 0;
        $data['dataBN4'] = [
        ['number_id' => 11, 'guess_number' => 33],
        //and so for until i added 9 more similar arrays here
        ];
    header('Content-Type: application/json');
    echo (json_encode($data));

$out = ob_get_clean();
echo $out;

UPdate:

i installed fire bug and now it show this error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://ourserverblabla/index.php?action=start_game. (Reason: CORS header 'Access-Control-Allow-Origin' missing)"

nSams Dev
  • 687
  • 2
  • 8
  • 21
  • how is the JSON generated? – Daniel A. White Jan 21 '16 at 00:48
  • 3
    Pretty sure you have a BOM at the 1st character position – Gavriel Jan 21 '16 at 00:50
  • inspect actual request itself in browser dev tools to see what is being returned – charlietfl Jan 21 '16 at 00:55
  • @DanielA.White with the php code above :) – nSams Dev Jan 21 '16 at 00:56
  • @charlietfl yes im using json tools in firefox and its showing there no error, its parsing json normally – nSams Dev Jan 21 '16 at 00:57
  • in the actual response body? Or opening in browser ... big difference – charlietfl Jan 21 '16 at 01:10
  • 1
    Set the `Content-Type` header to `application/json` in your PHP script. `header('Content-Type: application/json');`. Potentially also use `jQuery.parseJSON()` on the jQuery side to ensure it's handled correctly. – Darren Jan 21 '16 at 01:15
  • Try to replace your PHP generated JSON with *actual* JSON, and see if this error subsists. If not, then we know the issue lies with the PHP generating JSON – Nick Zuber Jan 21 '16 at 01:18
  • @NickZuber yeh just replaced it with the same json i recieve from the server but this time without the call i just stored the same json data into a var and when i used the data from that var it worked, weird! – nSams Dev Jan 21 '16 at 01:27
  • Okay so we narrowed down the problem :) have you tried @Darren 's idea of adding the `Content-type` yet? The `jQuery.parseJSON()` shouldn't work because when data is retrieved through ajax with the dataType being `json`, it's already parsed – Nick Zuber Jan 21 '16 at 01:28
  • @NickZuber Almost guaranteed it'll be the issue :P, it's sending as `text/html` atm. I've gone through this issue many times before haha – Darren Jan 21 '16 at 01:29
  • @NickZuber yes i already had that one set up from the start, but to yet still the problem exists, i even check with firefox inspector and it shows that the response is json. – nSams Dev Jan 21 '16 at 01:34
  • @NickZuber btw im also using output buffering in our server but i doubt this has any affect. – nSams Dev Jan 21 '16 at 01:36
  • Maybe try to change the output to just text and parse the response as JSON? Curious to see if that'd work – Nick Zuber Jan 21 '16 at 01:36
  • @NickZuber nope, nothing seems to be working, when i make the call to the same url from browser or debug tools everything is fine and i get json response as expected, but when i do it from with jquery, everything goes wrong. – nSams Dev Jan 21 '16 at 01:52
  • @nSamsDev try removing the `dataType: JSON` from your `ajax` request. – Darren Jan 21 '16 at 02:14
  • Not sure if it is related to your problem but as said in the PHP documentation, _The output buffer must be started by `ob_start()` with `PHP_OUTPUT_HANDLER_CLEANABLE` flag. Otherwise `ob_get_clean()` will not work._ See here : http://php.net/manual/en/function.ob-get-clean.php – Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Jan 21 '16 at 06:26
  • @TaReQMahMooD yeah thanks for the notice, i changed it to ob_gets_content with ob_end_clean and in our dev server it works just fine, but when we test in prod issue still exists. as in we still able to retrieve correct json when call is made to prod server via anyway but when we try jquery get we just keep getting same error over and over. btw pro and dev server are identical digital ocean droplets so im sure thats not an issue because when we created them it was initially 1 droplet but duplicated. im losing my mind over this :( – nSams Dev Jan 21 '16 at 10:52
  • Since the error now is Cross-Origin Request Blocked: The Same Origin Policy..., I think the problem might be the datatype in javascript. jsonp is able to bypass the same origin policy and load JSON from an external server. For more information about the difference check this [post](http://stackoverflow.com/questions/2887209/what-are-the-differences-between-json-and-jsonp) – wouter140 Jan 21 '16 at 11:06
  • @wouter140 yeah that was one solution, i tried it and it worked thanks :). but also i added header('Access-Control-Allow-Origin: *'); to the top of my php script and it worked too :) – nSams Dev Jan 21 '16 at 12:30

1 Answers1

2

FINALLYY it worked.

i added this line at the top of the script, and it worked.

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

it seems like this is an issue with jquery and some browsers. mainly browsers as they will block some of the communication for reason i dont even know.

nSams Dev
  • 687
  • 2
  • 8
  • 21