In the setup form of an ESP32 device the Update button works in one card only. For the setup page jquery, ajax, bootstrap and arduino jsonformer libraries are used. The dialog is mainly generated by jsonFormer.jquery.js The dialog comprises 3 cards.
.
you see the 3 buttons on the bottom. To modify the configuration I need to select one of the device tabs e.g. safetymonitor-0 There I can change a parameter , click on UPDATE to send a json coded information to the ESP32 . When clicking on SAVE the modified dota is written to the setup.html which in the internal memory of the ESP32. ( Looks a bit strange to me but so it was in the repo.) This works with safetymonitor-0. It does not work with obervationcondition-0. To get a feedback on the click event I added the alert instruction. The REFRESH and the SAVE buttons are working. The UPDATE button works only if I do not change any parameter in the form. Here the input area:
Here the buttons to click.
After changing at least one of the paramters the UPDATE button does not work.
Here the html code:
<!DOCTYPE html>
<html>
<head>
<title>Alpaca Ascom Drivers Setup</title>
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/jquery-ui.min.css">
<link rel="stylesheet" href="/css/theme.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jsonFormer.jquery.js"></script>
</head>
<body>
<div class="container">
<div class="card mb-3 mt-3">
<div class="card-header">
<div id="title"><H3>Alpaca Ascom Drivers Setup</H3></div>
<ul id="nav-links" class="nav nav-tabs card-header-tabs">
</ul>
</div>
<div class="card-body">
<div id="form-container"></div>
<button type="button" id="json_refresh" class="btn btn-primary">Refresh</button>
<button type="button" id="json_update" class="btn btn-primary">Update</button>
<button type="button" id="json_save" class="btn btn-primary">Save</button>
</div>
</div>
<script>
$(document).ready(function ()
{
$.ajaxSetup({ cache: false });
$.getJSON("jsondata", function(data) {
$('#form-container').jsonFormer({
title: "Setup",
jsonObject: data
});
data;
});
$("#json_update").click(function (event) {
$.ajax({
url: 'jsondata',
//type: 'POST',
type:'POST',
dataType: "json",
//data: JSON.stringify($('#form-container').jsonFormer('formData')),
data: JSON.stringify($('#form-container').jsonFormer('getDiff')),
contentType: 'application/json',
success: function(msg) {alert(" Update done")
}
})
});
$("#json_save").click(function () {
$.getJSON("/save_settings", function(data) {
alert(data['saved'] == true? "Saved succesfully" : "Save failed!");
})
});
$("#json_refresh").click(function () {
location.reload(); // until json-only refresh is ready
});
$.getJSON("/links", function(data) {
let path = window.location.pathname;
for(name in data) {
let url = data[name];
let navitem = $('<li class="nav-item"><a class="nav-link" href="#"></a></li>');
let a = navitem.find("a");
a.attr('href', url).text(name);
if(path == url)
a.addClass('active');
$("#nav-links").append(navitem);
}
});
});
</script>
</body>
</html>
ADDENDUM: When tab oberservingconditions-0 is selected, a value in configuration is changed and UPDATE is clicked I find following error message in the console:
Uncaught SyntaxError: unexpected token: identifier jQuery 8 http://192.168.178.50/api/v1/observingconditions/0/setup:54 jQuery 8 http://192.168.178.50/api/v1/observingconditions/0/setup:46 jQuery 13 jsonFormer.jquery.js:1:30
In the setup form of an ESP32 device the Update button works in one card only. For the setup page jquery, ajax, bootstrap and arduino jsonformer libraries are used. The dialog is mainly generated by jsonFormer.jquery.js The dialog comprises 3 cards.
.
you see the 3 buttons on the bottom. To modify the configuration I need to select one of the device tabs e.g. safetymonitor-0 There I can change a parameter , click on UPDATE to send a json coded information to the ESP32 . When clicking on SAVE the modified dota is written to the setup.html which in the internal memory of the ESP32. ( Looks a bit strange to me but so it was in the repo.) This works with safetymonitor-0. It does not work with obervationcondition-0. To get a feedback on the click event I added the alert instruction. The REFRESH and the SAVE buttons are working. The UPDATE button works only if I do not change any parameter in the form. Here the input area:
Here the buttons to click.
After changing at least one of the paramters the UPDATE button does not work.
Here the html code:
<!DOCTYPE html>
<html>
<head>
<title>Alpaca Ascom Drivers Setup</title>
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/jquery-ui.min.css">
<link rel="stylesheet" href="/css/theme.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jsonFormer.jquery.js"></script>
</head>
<body>
<div class="container">
<div class="card mb-3 mt-3">
<div class="card-header">
<div id="title"><H3>Alpaca Ascom Drivers Setup</H3></div>
<ul id="nav-links" class="nav nav-tabs card-header-tabs">
</ul>
</div>
<div class="card-body">
<div id="form-container"></div>
<button type="button" id="json_refresh" class="btn btn-primary">Refresh</button>
<button type="button" id="json_update" class="btn btn-primary">Update</button>
<button type="button" id="json_save" class="btn btn-primary">Save</button>
</div>
</div>
<script>
$(document).ready(function ()
{
$.ajaxSetup({ cache: false });
$.getJSON("jsondata", function(data) {
$('#form-container').jsonFormer({
title: "Setup",
jsonObject: data
});
data;
});
$("#json_update").click(function (event) {
$.ajax({
url: 'jsondata',
//type: 'POST',
type:'POST',
dataType: "json",
//data: JSON.stringify($('#form-container').jsonFormer('formData')),
data: JSON.stringify($('#form-container').jsonFormer('getDiff')),
contentType: 'application/json',
success: function(msg) {alert(" Update done")
}
})
});
$("#json_save").click(function () {
$.getJSON("/save_settings", function(data) {
alert(data['saved'] == true? "Saved succesfully" : "Save failed!");
})
});
$("#json_refresh").click(function () {
location.reload(); // until json-only refresh is ready
});
$.getJSON("/links", function(data) {
let path = window.location.pathname;
for(name in data) {
let url = data[name];
let navitem = $('<li class="nav-item"><a class="nav-link" href="#"></a></li>');
let a = navitem.find("a");
a.attr('href', url).text(name);
if(path == url)
a.addClass('active');
$("#nav-links").append(navitem);
}
});
});
</script>
</body>
</html>
ADDENDUM: When tab oberservingconditions-0 is selected, a value in configuration is changed and UPDATE is clicked I find following error message in the console:
Uncaught SyntaxError: unexpected token: identifier jQuery 8 http://192.168.178.50/api/v1/observingconditions/0/setup:54 jQuery 8 http://192.168.178.50/api/v1/observingconditions/0/setup:46 jQuery 13 jsonFormer.jquery.js:1:30
Share Improve this question edited Mar 3 at 19:44 autoguider asked Mar 3 at 12:58 autoguiderautoguider 357 bronze badges 5- Do you have an JS error in your console? – Wimanicesir Commented Mar 3 at 13:42
- Changed the code to $("body").on("click", "#json_update", (event)=> { $.ajax({..... still does not work. Is this the correct syntax? – autoguider Commented Mar 3 at 15:09
- @Wimanicesir Checked on browser console: See detailed error message in addendum at main text. Additionally warnings, independent from clicking. Source-Map-Fehler: Error: request failed with status 400 Stack in the worker:networkRequest@resource://devtools/client/shared/source-map-loader/utils/network-request.js:43:9 Ressourcen-Adresse: 192.168.178.50/css/bootstrap.min.css Source-Map-Adresse: bootstrap.min.css.map – – autoguider Commented Mar 3 at 19:48
- New outcome: Event is executed in any case. Problem lies in: JSON.stringify($('#form-container').jsonFormer('formData')); Execution frozen in this command. – autoguider Commented Mar 5 at 10:17
- Issue solved. jsonFormer interprets spaces as the begin of a new field. Replacing the spaces by underscores in the cpp source e.g. obj_config[F("Average Period") to obj_config[F("Average_Period") helped. Lesson learned. Do not use spaces when applying jsonFormer.jquery.js Inspector of MS-Edge gives more details than Firefox inspector. – autoguider Commented Mar 5 at 18:56
1 Answer
Reset to default 1Issue solved. It was not the event handling. jsonFormer interprets spaces as the begin of a new field.
This caused the error of the page.
Replacing the spaces by underscores in the cpp source e.g. obj_config[F("Average Period") to obj_config[F("Average_Period") helped.
Lesson learned. Do not use spaces when applying jsonFormer.jquery.js
Inspector of MS-Edge gives more details than Firefox inspector.