Error when load form data in W2UI. "Cannot associate field "id" with html control" - w2ui

Question

My form can not update data which it got from server to form's record.
Below is my w2form
$().w2form({
name: 'editSv',
method: 'GET',
style: 'border: 0px; background-color: transparent;',
recid: w2ui['grid'].records[w2ui['grid'].getSelection(true)]['id'],
url: {
get: '/api/Test/GetService/' + w2ui['grid'].records[w2ui['grid'].getSelection(true)]['id'],
save: '/api/Test/PostService'
},
formURL: '/api/Test/GetService/' + w2ui['grid'].records[w2ui['grid'].getSelection(true)]['id'],
fields: [
{ name: 'id', type: 'number', required: true },
{ name: 'servicename', type: 'text', required: true },
{ name: 'price', type: 'number', required: true },
{ name: 'unit', type: 'text' }
],
record: {
id: 0,
servicename: '',
price: 0,
unit: ''
}, onSubmit: function (formName, formObj) {
formObj.postData = formObj.postData.record;
},
onLoad: function (event) {
console.log(event.xhr);
},
actions: {
"save": function () {
var obj = this;
this.submit({}, function (data) {
if (data.status == 'success') {
w2alert(data.status);
w2ui['grid'].reload();
} else {
w2alert(data.message);
return;
}
obj.clear();
});
},
"reset": function () { this.clear(); },
}
});
This is data got from onLoad() event
{readyState: 4, responseText: "{"id":5,"servicename":"4","price":4.0000,"unit":"4"}", status: 200, statusText: "OK"}
And the message from chrome's console:
ERROR: Cannot associate field "id" with html control. Make sure html control exists with the same name.
ERROR: Cannot associate field "servicename" with html control. Make sure html control exists with the same name.
ERROR: Cannot associate field "price" with html control. Make sure html control exists with the same name.
ERROR: Cannot associate field "unit" with html control. Make sure html control exists with the same name.
I have tried to add formHTML to w2form but it makes no sense. Has anyone solved this problem?

Answer 1

Have you defined any HTML page for your w2ui form in this case you can use kickstart or you can define formHTML in your form:
$().w2form({
name: 'editSv',
style:'border: 0px',
focus:-1,method: 'GET',
style: 'border: 0px; background-color: transparent;',
recid: w2ui['grid'].records[w2ui['grid'].getSelection(true)]['id'],
url: {
get: '/api/Test/GetService/' + w2ui['grid'].records[w2ui['grid'].getSelection(true)]['id'],
save: '/api/Test/PostService'
},
formURL: '/api/Test/GetService/' + w2ui['grid'].records[w2ui['grid'].getSelection(true)]['id'],
formHTML:
'<div class="w2ui-page page-0">'+
' <div class="w2ui-field">'+
' <label> id </label>'+
' <div>'+
' <input name="id" type="text" />'+
' </div>'+
' </div>'+ ' <div class="w2ui-field">'+
' <label> id </label>'+
' <div>'+
' <input name="id" type="text" />'+
' </div>'+
' </div>'+ ' <div class="w2ui-field">'+
' <label> price </label>'+
' <div>'+
' <input name="price" type="text" />'+
' </div>'+
' </div>'+ ' <div class="w2ui-field">'+
' <label> unit </label>'+
' <div>'+
' <input name="unit" type="text" />'+
' </div>'+
' </div>'+
'<div class="w2ui-buttons">'+
' <button class="btn" name="Cancel">Cancel</button>'+
' <button class="btn" name="Save">Save</button>'+
'</div>',
fields: [
{ name: 'id', type: 'number', required: true },
{ name: 'servicename', type: 'text', required: true },
{ name: 'price', type: 'number', required: true },
{ name: 'unit', type: 'text' }
],
record: {
id: 0,
servicename: '',
price: 0,
unit: ''
}, onSubmit: function (formName, formObj) {
formObj.postData = formObj.postData.record;
},
onLoad: function (event) {
console.log(event.xhr);
},
actions: {
"save": function () {
var obj = this;
this.submit({}, function (data) {
if (data.status == 'success') {
w2alert(data.status);
w2ui['grid'].reload();
} else {
w2alert(data.message);
return;
}
obj.clear();
});
},
"reset": function () { this.clear(); },
}
});