jquery - CakePHP 3 and jsGrid - failed AJAX

Question

When using jsGrid, the controller of the script uses ajax to load, add, edit and delete data. However, currently when I attempt to add data, it fails to save to the database, and the grid shows up as blank.

This screenshot is my initial jsGrid when I start a new line in the jsGrid and enter some data.

When I click the green + button, the data is saved to the jsGrid, and no data is saved to the mySQL database.

This is my 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: "Drum Kit", Id: 1},
            {Name: "Guitar", Id: 2},
            {Name: "Piano", Id: 3},
            {Name: "Violin", Id: 4},
        ];

        $("#jsGrid").jsGrid({
            controller: {
                loadData: function (filter) {
                    $.ajax({
                        type: "GET",
                        url: "<?= $host.$basepath ?>/instrument/",
                        data: filter
                    });
                },
                insertItem: function (item) {
                    $.ajax({
                        type: "POST",
                        url: "<?= $host.$basepath ?>/instrument/",
                        data: item
                    });
                },
                updateItem: function (item) {
                    $.ajax({
                        type: "PUT",
                        url: "<?= $host.$basepath ?>/instrument/",
                        data: item
                    });
                },
                deleteItem: function (item) {
                    $.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>
</div>

$host.$basepath are two variables set in the AppController which refer to my host and the base of my project respectively. resource_id as an input is to ensure the foreign key to the Resources table is filled in.

The controller portion of the script comes from the PHP sample of jsGrid.

When I do an Inspect console, my console.log of the item being added is as follows:

I do have AJAX already implemented in my config/routes.php, as per this page in the CakePHP 3 Cookbook:

$routes->extensions(['json', 'xml']);

And my AppController already has Request Handler in the initialize function, as per this page, which is passed down to all other controllers:

$this->loadComponent('RequestHandler');

Update: I've removed the return from the ajax which fixes the saving and updating to jsGrid errors, however still none of the Ajax callbacks work.