Greetings to all in the forum.
I'm totally new to AppML which by the way i found very interesting.
Followed the tutorial of https://www.w3schools.com/appml/appml_client.asp till the end of it https://www.w3schools.com/appml/appml_database.asp and trying to build the web application by using WebSQL.
In the table customers i can delete an existing record and modified it, but i can't add a new one.
Every time when i go to New button and adding new customer data, when i press Save button i got an error in Chrome console Uncaught TypeError: Cannot read property 'CustomerID' of undefined
at AppML.putRecord (appml.js:527)
at AppML.saveRecord (appml.js:593)
at HTMLButtonElement.onclick (app2.html:1)
Specifically got error in line 527 of appml.js
{
if (action === "UPDATE") {
if (this.data.records[0][this.data.keyField] === "") {action = "ADD"; }
}
And in line 593 of appml.js
this.saveRecord = function () {
this.putRecord("UPDATE");
};
My HTML Prototype is the follow
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="appml.js"></script>
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js"></script>
</head>
<body>
<div class="w3-container">
<div id="Form01" class="w3-container w3-light-grey w3-padding-large w3-margin-bottom" appml-data="local?model=model_customersform" appml-controller="myFormController" style="display:none;">
<div appml-include-html="inc_formcommands.htm"></div>
<p>
<label for="customername">Customer:</label>
<input id="customername" class="w3-input w3-border">
</p>
<p>
<label for="address">Address:</label>
<input id="address" class="w3-input w3-border">
</p>
<p>
<label for="city">City:</label>
<input id="city" class="w3-input w3-border">
</p>
<p>
<label for="postalcode">Postal Code:</label>
<input id="postalcode" class="w3-input w3-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country" class="w3-input w3-border">
</p>
</div>
<div appml-data="local?model=model_customerslist">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table class="w3-table-all">
<tr>
<th></th>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer;width:34px;"
onclick="appml('Form01').run({{CustomerID}})">✎</td>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</div>
<script>
function myFormController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>
</body>
</html>
Any help it's appreciated, i'm stuck at that point. I've tried some solutions but didn't worked. I have a feeling that something i am missing, cause i'm not an english native speaker.
Any solutions?
Thanks in advance.