Jump to content

AppML new Record not working


Recommended Posts

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 () {

My HTML Prototype is the follow

<!DOCTYPE html>
<html lang="en-US">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</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>
<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>

<label for="customername">Customer:</label>
<input id="customername" class="w3-input w3-border">

<label for="address">Address:</label>
<input id="address" class="w3-input w3-border">

<label for="city">City:</label>
<input id="city" class="w3-input w3-border">

<label for="postalcode">Postal Code:</label>
<input id="postalcode" class="w3-input w3-border">

<label for="country">Country:</label>
<input id="country" class="w3-input w3-border">

<div appml-data="local?model=model_customerslist">
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table class="w3-table-all">
<tr appml-repeat="records">
  <td style="cursor:pointer;width:34px;"


function myFormController($appml) {
    if ($appml.message == "ready") {return -1;}
    if ($appml.message == "loaded") {


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.

Link to comment
Share on other sites

I have to answer my own question as i don't see any reactions by now.

A quick and dirty solution,  is the follow.

In appml.js in line 589 instead of 

this.newRecord = function () {


  this.newRecord = function () {
which when you press New button it adds the existing record.Refresh page you can see the new entry and after you can modify it's data and with Save button you update the record.



Edited by harrk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...