Ajax call inside an ajax success not working

Question

I am trying to make an Ajax call inside another Ajax success function but it somehow doesn't work. I get the following error in my console. I don't understand what it means:

Object { readyState: 0, getResponseHeader: .ajax/v.getResponseHeader(), getAllResponseHeaders: .ajax/v.getAllResponseHeaders(), setRequestHeader: .ajax/v.setRequestHeader(), overrideMimeType: .ajax/v.overrideMimeType(), statusCode: .ajax/v.statusCode(), abort: .ajax/v.abort(), state: .Deferred/d.state(), always: .Deferred/d.always(), then: .Deferred/d.then(), 10 more… }

I found something like below from the object

statusText:"SyntaxError: An invalid or illegal string was specified"

JS

 //Update the board with the moves so far made
    var updateBoard = function() {
        var style;
        $.ajax({
            type: "POST",
            url: "engine/main.php",
            data: {code: 2},
            success: function(response) {
                if(response != "") {
                    var obj = JSON.parse(response);
                    lastClick = obj[obj.length - 1].player;
                    $(obj).each(function (i, val) {
                        if (val.player == 1) {
                            style = "cross";
                        }
                        else if (val.player == 2) {
                            style = "circle";
                        }
                        $('td[data-cell="' + val.cell + '"]').html(val.sign).addClass(style);
                    });

                    if(obj.length > 2) {
                        makeDecision();
                    }
                }
                else {
                    lastClick = null;
                    $('td').html("").removeClass();
                }
                setTimeout(updateBoard, 1000);
            }
        });
    };
    updateBoard();

function makeDecision() {
        console.log('starting decision function');
        $.ajax({
            type: "engine/main.php",
            data: {code: 3},
            success: function(winner) {
                console.log('end');
                console.log(winner);
            },
            error: function(data) {
                console.log(data);
            }
        });
    }

PHP

if(isset($_POST['code'])) {
    $code = $_POST['code'];
    //Handle player number on game start
    if($code == 1) {
        if (!isset($_COOKIE['gamePlay'])) {
            header('Location: index');
        }
        $playerCode = $_COOKIE['gamePlay'];
        $player = $playersHandler->getPlayer($playerCode);
        echo $player;
    }
    // Update board with new moves
    else if($code == 2) {
        $currentPosition = $gameHandler->getMoves();
        echo $currentPosition;
    }
    else if($code == 3) {
        $result = $code; //$gameHandler->decide();
        echo $result;
    }
    //Reset Board
    else if($code == 4) {
        $gameHandler->reset();
    }
}

Answer 1

You are passing an invalid string to type property inside the makeDecision function ajax call. You should set this as following:

type: 'POST',
url: 'engine/main.php',
...

instead of

type: 'engine/main.php'

---

Make sure that the following line

var obj = JSON.parse(response);

returns an array , not an object. If obj is not an array, then obj.length is undefined

Answer 2

You can call ajax again inside the ajaxComplate event like this:

$( document ).ajaxComplete(function() {
   $.ajax({
            type: "post",
            url: 'engine/main.php',
            data: {code: 3},
            success: function(winner) {
                console.log('end');
                console.log(winner);
            },
            error: function(data) {
                console.log(data);
            }
        });
});

Answer 3

You can not get length of object directly obj.length in javascript.So if you are getting response properly.Get length of Parsed object like this..

var length = Object.keys(obj).length;

Then

lastClick = obj[length-1].player;

Make correct use of $.each like this..

$.each(obj,function (i, val){
//code

});