Loading/saving multiple rows of JSGrid - mysql

Question

I would like to use JSGrid as a way to both load data from a MySQL database, as well as save (new or edited) multiple rows of data via CakePHP 3. However, I'm unsure of how to do that, or whether that's possible.
For loading, I'd like to get the data from two connected tables if say I want to edit data. In CakePHP 3, I'd retrieve the data using a find and then setting it to the view, but I'm unsure how to go from there to put it into the JSGrid upon loading the view.
For saving similarly, I would save to two different tables. In CakePHP 3, normally for multiple tables, I'd use patch entity to save to the various tables, and AJAX to save things on another page without actually being on that page (the two add pages of the each of the tables). But I'm not sure if you can do that with multiples of data.
Eg.
$.post(".../users/add.json"
given the fields for users, will do what the add page would normally do, and patch entity with associated tables would save to the various associated tables, but only one at a time.
Update:
My config/routes.php:
Router::scope('/', function (RouteBuilder $routes) {
$routes->extensions(['json', 'xml']);
$routes->resources('Instrument');
}
My view:
<div id="jsGrid"></div>
<script>
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: "<?= $basepath ?>/instrument/view/",
data: filter
});
},
insertItem: function (item) {
return $.ajax({
type: "POST",
url: "<?= $basepath ?>/instrument/add",
data: item
});
},
updateItem: function (item) {
return $.ajax({
type: "PUT",
url: "<?= $basepath ?>/instrument/edit",
data: item
});
},
deleteItem: function (item) {
return $.ajax({
type: "DELETE",
url: "<?= $basepath ?>/instrument/delete",
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},
{type: "control"}
]
});
</script>
<?= $basepath ?> is a variable set in my AppController that means regardless of the project name, I can still access URLs.
In the view, when I try to save a new line, the line is added, but the contents are blank. When I try to edit a line, I get a "Please wait", and then nothing gets saved, and I can still edit the fields. Also, in the console, I receive the following error:
http://localhost/<?= $basepath ?>/instrument/edit Failed to load resource: net::ERR_CONNECTION_RESET