javascripthtmljqueryajaxarduino-esp32

Button click event not fired

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.

Setup dialog .

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:

Top section of the form

Here the buttons to click.

Button area 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 Console Error on click

Solution

  • Issue 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.