Issue with saving data

[mistaq]

Hi,

I followed your PHP sample and the CakePHP 3.0 Cookbook on REST implementation and currently have the following in my config/routes.php, to allow for ajax and the specific controller which is to use jsGrid:

Router::scope('/', function (RouteBuilder $routes) {
    $routes->extensions(['json', 'xml']);
    $routes->resources('Instrument');
}

And in my View, this is the jsGrid script:

<div id="jsGrid"></div>
    <script>
         var id = "<?php echo $id?>" //the id being passed to the View.
         var resources = [];

        var instruments = [
            {Name: "", Id: 0},
            {Name: "Clarinet", Id: 1},
            {Name: "Guitar", Id: 2},
            {Name: "Piano", Id: 3},
            {Name: "Violin", Id: 4},
        ];

        $("#jsGrid").jsGrid({
            controller: {
                loadData: function (filter) {
                    return $.ajax({
                        type: "GET",
                        url: "<?= $host.$basepath ?>/instrument/",
                        data: filter
                    });
                },
                insertItem: function (item) {
                    return $.ajax({
                        type: "POST",
                        url: "<?= $host.$basepath ?>/instrument/",
                        data: item
                    });
                },
                updateItem: function (item) {
                    return $.ajax({
                        type: "PUT",
                        url: "<?= $host.$basepath ?>/instrument/",
                        data: item
                    });
                },
                deleteItem: function (item) {
                    return $.ajax({
                        type: "DELETE",
                        url: "<?= $host.$basepath ?>/instrument/",
                        data: item
                    });
                }
            },

            width: "100%",
            height: "400px",

            inserting: true,
            editing: true,
            sorting: true,
            paging: true,

            data: resources,

            fields: [
                        {
                             name: "Instrument",
                             type: "select",
                             items: instruments,
                             valueField: "Id",
                             textField: "Name",
                             validate: "required",
                             width: 175
                        },
                        {name: "Comment", type: "text", width: 150},
                        {name: "resource_id", type: "text", width: 150, visible: false,
                                        insertTemplate: function() {
                                            var input = this.__proto__.insertTemplate.call(this);
                                            input.val(id)
                                            return input;
                                    }},
                        {type: "control"}
                    ]
        });
    </script>

Currently, when I try to save new data, I get empty lines (as in the a new line will appear in the jsGrid, but nothing that I input when adding it is there).

In the console (I did a console.log of item), I get "Object", which when expanded shows the following:

Comment: ""
Instrument: 6 (the 6th ID in the Select dropdown chosen in one of my tests)
__proto__: Object

When I try to edit data and then save it, I get a "Please wait" message, followed by nothing saving, the line of data still being editable, and a console error as follows:

http://<? $host.$basepath ?>/instrument/edit Failed to load resource: net::ERR_CONNECTION_RESET

With <?= $host.$basepath ?> referring to the host of the server and my system's base URL respectively.

This is an excerpt of the Index page:

<?php
    $config = include("$host.$basepath/config/app.php");
    $db = new PDO($config["db"], $config["username"], $config["password"]);
    $instruments = new Instruments($db);
    switch($_SERVER["REQUEST_METHOD"]) {
        case "GET":
            $result = $instruments->getAll(array(
                "instrument" => $_GET["instrument"],
                "comment" => $_GET["comment"],
                "resource_id" => intval($_GET["resource_id"])
            ));
            break;
        case "POST":
            $result = $instruments->insert(array(
                "instrument" => $_POST["instrument"],
                "comment" => $_POST["comment"],
                "resource_id" => intval($_POST["resource_id"])
            ));
            break;
        case "PUT":
            parse_str(file_get_contents("php://input"), $_PUT);
            $result = $instruments->update(array(
                "instrument" => $_PUT["instrument"],
                "comment" => $_PUT["comment"],
                "resource_id" => intval($_PUT["resource_id"])
            ));
            break;
        case "DELETE":
            parse_str(file_get_contents("php://input"), $_DELETE);
            $result = $instruments->remove(intval($_DELETE["id"]));
            break;
    }
    header("Content-Type: application/json");
    echo json_encode($result);
    ?>