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.

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...