CakePHP 3 - AJAX saving issue and Uncaught SyntaxError: Unexpected identifier - php

Question

I have a form in a modal that saves data in a table (Food). The table has the following fields:
ID
Category
Type
When I load the page, I straight away get an Uncaught SyntaxError: Unexpected identifier (managefood:393); I've commented in the code below which line this refers to.
Opening the modal and filling in the fields works fine. Saving however fails, upon refreshing the page and checking MySQL, no new data has been entered. I'm not really sure how to check where my AJAX POST has failed (for example if say one of the form inputs is broken, and since those fields are required, that would explain it not saving).
I re-Cake baked my Model as well for the table, just to check if there was an issue in the Model, but that didn't fix it.
Below is the code that includes the button and script that opens the modal, the modal itself with the form inputs, and the script that saves the data.
$(document).ready(function() {
$("#newsavebutton").click(function() {
$.post("<?= $host . $basepath ?>/food/add.json", {
category: $('#category').val(),
type: $('#type').val() //line 393
};);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button onclick="newFood()" class="btn btn-primary btn-xl page-scroll wow tada">New Food</button>
<script>
function newFood() {
$('#newfoodModal').modal('show');
}
</script>
<div class="modal fade" id="newfoodModal" tabindex="-1" role="dialog" aria-labelledby="newfoodLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="newfoodLabel">New Food</h3>
<br>
<div>
<div class="col-sm-12">
<label for="category" id="newCategoryLabel" style="text-align: left">Category</label>
<select name="category" id="newCategory" onchange="newchangeCategory()" class="form-control">
<option value="" disabled selected hidden>Select a category</option>
<option value="Fruit">Fruit</option>
<option value="Vegetable">Vegetable</option>
</select>
</div>
<div class="col-sm-12">
<label for="type" id="newTypeLabel" style="text-align: left">Type</label>
<select name="type" id="newType" class="form-control"></select>
</div>
//this script enables for the second select to change based on the first - if Fruit is chosen as the category for example, only fruit options are shown in the Type select.
<script type="text/javascript">
var typeOptions = {};
typeOptions['Fruit'] = [
'Apple',
'Pear',
'Banana',
'Plum',
'Peach'
];
typeOptions['Vegetable'] = [
'Broccoli',
'Carrot',
'Pumpkin'
];
function newchangeCategory() {
var categoryChoice = document.getElementById('newCategory');
var typeChoice = document.getElementById('newType');
var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value; //line 340
console.log(selectedCategoryChoice);
while (typeChoice.options.length) {
typeChoice.remove(0);
}
var typesAvailable = typeOptions[selectedCategoryChoice];
if (typesAvailable) {
var i;
for (i = 0; i < typesAvailable.length; i++) {
var type = new Option(typesAvailable[i], typesAvailable[i]);
typeChoice.options.add(type);
}
}
};
</script>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
<button id="newsavebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes
</button>
</div>
</div>
</div>
</div>
Below is also the code for the Add function in the Controller:
public function add()
{
$food = $this->Food->newEntity();
if ($this->request->is('post')) {
$food = $this->Food->patchEntity($food, $this->request->data);
if ($this->Food->save($food)) {
$this->Flash->success(__('The food has been saved.'));
return $this->redirect(['action' => 'index']);
} else {
$this->Flash->error(__('The food could not be saved. Please, try again.'));
}
}
$this->set(compact('food'));
$this->set('_serialize', ['food']);
}

Answer 1

As far as I see this is a syntax error.
Your code is as follows:
$.post("<?= $host . $basepath ?>/food/add.json", {
category: $('#category').val()
type: $('#type').val() //line 393
};);
Try adding a coma , after line 392, before the type: property declaration. Like so:
$.post("<?= $host . $basepath ?>/food/add.json", {
category: $('#category').val(), //<-- here
type: $('#type').val() //line 393
};);
Regarding the error handling issue: According to the jQuery documentation you cana use the .done(), .fail() and .always() methods to see whether the POST request itself fails or is successful. For example:
$.post("<?= $host . $basepath ?>/food/add.json", {
category: $('#category').val(), //<-- here
type: $('#type').val() //line 393
})
.done(function(data) {
console.log(data);
alert( "success" );
})
.fail(function(error) {
console.log(error);
alert( "error" );
});
That way you can see what the POST returns and what the erorr is (if any).