Update seems to disable buttons in menu, have to revert to make them work again

[Michel2]

Hi everyone,

I'm on Wappler v6.8.0 and I made a webpage in an earlier version. It's working fine. I have buttons that call offscreen canvasses or modals and they respond just fine when clicked on the buttons. When I update the appconnect etc. when asked for this by Wappler, it keeps the buttons from working after that.

I've tried to delete the button, put it back in, check all the usual stuff, but there seems to be nothing that I can do but to revert to the version without the updates. Then everything is fine again.

How to approach this and be able to make use of the updates for the website?

Greets,

Michel

[ben]

Hi Michel, could you show the code for the button that shows the offscreen canvas as well as for the modal?

Seeing your joining date, I assume that the original project was based on Bootstrap 5.3 (the current version).

[Michel2]

Hi Ben,

Yes, you're right, it's Bootstrap5.

 <div class="offcanvas offcanvas-end bg-secondary bg-opacity-50 rounded-start rounded-2 style77 d-lg-none w-auto" id="offcanvas_datacall_paged1" is="dmx-bs5-offcanvas" tabindex="-1">
    <div class="offcanvas-header style76 pt-1">
      <button id="btn3" class="btn text-white btn-sm mt-2" dmx-animate-enter="bounceIn" dmx-on:click="offcanvas_datacall_paged1.hide()"><i class="fas fa-window-close fa-2x"></i></button>
      <h5 class="offcanvas-title text-light ms-xl-2 ms-lg-2 ms-md-2 mt-1 ms-2 ms-sm-2 mt-xxl-1 ms-xxl-3">frühere Einträge</h5>

    </div>
    <div class="offcanvas-body pt-1">
      <div class="table-responsive">
        <div class="table-responsive">
          <table class="table table-sm">
            <thead>
              <tr>
                <th scope="row" class="pt-2 pb-2 bg-body-secondary style79">undefined</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">ID</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Assetname</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Datum hinzugefügt</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary visually-hidden">Additions asset</th>
                <th scope="row" class="fw-light bg-body-secondary pt-2 pb-2">Monat und Jahr</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz Chance</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz Risiko</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary d-none d-lg-table-cell">Bemerkungen</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Stoploss</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Takeprofit</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary visually-hidden">Assetname</th>
              </tr>
            </thead>
            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_datacall_paged.data.query.data" id="tableRepeat3">
              <tr>
                <td class="bg-body-tertiary">
                  <button id="modalbtn3" class="btn text-danger mb-2" dmx-on:click="run([{run:{outputType:'text',action:`modal1.show()`}},{run:{outputType:'text',action:`modal1.text1.setValue(additions_id)`}},{run:{outputType:'text',action:`modal1.text2.setValue(\'Record: \'+additions_id+\', hinzugefügt: \'+added_date.formatDate(\'dd-MM-yyyy HH:mm\')+\', mit Ware: \'+assetname_DE)`}}])"><i class="far fa-times-circle fa-lg"></i></button>
                </td>
                <td class="bg-body-tertiary pt-2" dmx-text="additions_id"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="assetname_DE"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="added_date.formatDate('dd-MM-yyyy HH:mm')"></td>
                <td class="bg-body-tertiary visually-hidden pt-2" dmx-text="additions_asset_id"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="monat_jahr"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz_chance"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz_risk"></td>
                <td class="bg-body-tertiary d-none d-lg-table-cell pt-2" dmx-text="remarks.trunc(50, 'true', '...')"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="stoploss"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="takeprofit"></td>
                <td class="bg-body-tertiary visually-hidden pt-2" dmx-text="assetname_EN"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

This is for the modal the code above.

 <header class="container-fluid">
    <div class="text-black-50 container-fluid">
      <div class="row row-cols-5 row-cols-xxl-7">
        <div class="col-7 col-xxl">
          <nav class="navbar navbar-expand-lg fixed-top">
            <a class="navbar-brand style36 fw-light bg-secondary-subtle mt-md-2 ms-md-2 mt-sm-2 ms-sm-2 mt-2 mb-3 ms-2 mb-lg-4 ms-lg-3" href="#">Backend GOAT app</a>
            <span class="navbar-text fw-lighter me-2 d-none d-lg-block mb-lg-3">version 1.0.4</span>
            <button class="navbar-toggler style71 bg-secondary-subtle" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end style90" id="navbar1_collapse">
              <div class="navbar-nav flex-md-row-reverse flex-md-wrap flex-lg-nowrap flex-lg-row">
                <a class="nav-item nav-link active style73 w-50 fw-light text-body bg-secondary-subtle text-center text-md-center align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 mt-sm-3 me-sm-3 ps-sm-3 mt-md-4 me-md-3 align-self-lg-center mb-lg-3 d-none d-lg-block" dmx-on:click="offcanvas_datacall_paged.show()">frühere Einträge</a>
                <a class="nav-item nav-link active style73 w-50 fw-light text-body bg-secondary-subtle text-center text-md-center align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 mt-sm-3 me-sm-3 ps-sm-3 mt-md-4 me-md-3 align-self-lg-center mb-lg-3 d-lg-none" dmx-on:click="offcanvas_datacall_paged1.show()">frühere Einträge</a>
                <a class="nav-item nav-link style55 text-center fw-light text-body bg-secondary-subtle text-md-center w-50 h-auto align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 align-self-lg-center pt-lg-4 pb-lg-4 d-none d-lg-block" dmx-on:click="run({run:{outputType:'text',action:`modal2.show()`}})">Logout</a>
                <a class="nav-item nav-link style55 text-center fw-light text-body bg-secondary-subtle text-md-center w-50 h-auto align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 align-self-lg-center pt-lg-4 pb-lg-4 d-lg-none" dmx-on:click="run({run:{outputType:'text',action:`modal2.show()`}})">Logout</a>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>

This code above is for the button(s).

There are two of each by the way. One is shown on mobile and tablet, the other one from laptop until desktop full screen.

I hope this is helpful.

Thanks for your time!

[ben]

For the offcanvas, does your button to show the offcanvas look like

<button id="btn1" class="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_datacall_paged1">Button</button>

[Michel2]

This the complete header for the navbar in which the buttons are also:

<header class="container-fluid">
    <div class="text-black-50 container-fluid">
      <div class="row row-cols-5 row-cols-xxl-7">
        <div class="col-7 col-xxl">
          <nav class="navbar navbar-expand-lg fixed-top">
            <a class="navbar-brand style36 fw-light bg-secondary-subtle mt-md-2 ms-md-2 mt-sm-2 ms-sm-2 mt-2 mb-3 ms-2 mb-lg-4 ms-lg-3" href="#">Backend GOAT app</a>
            <span class="navbar-text fw-lighter me-2 d-none d-lg-block mb-lg-3">version 1.0.4</span>
            <button class="navbar-toggler style71 bg-secondary-subtle" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end style90" id="navbar1_collapse">
              <div class="navbar-nav flex-md-row-reverse flex-md-wrap flex-lg-nowrap flex-lg-row">
                <a class="nav-item nav-link active style73 w-50 fw-light text-body bg-secondary-subtle text-center text-md-center align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 mt-sm-3 me-sm-3 ps-sm-3 mt-md-4 me-md-3 align-self-lg-center mb-lg-3 d-none d-lg-block" dmx-on:click="offcanvas_datacall_paged.show()">frühere Einträge</a>
                <a class="nav-item nav-link active style73 w-50 fw-light text-body bg-secondary-subtle text-center text-md-center align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 mt-sm-3 me-sm-3 ps-sm-3 mt-md-4 me-md-3 align-self-lg-center mb-lg-3 d-lg-none" dmx-on:click="offcanvas_datacall_paged1.show()">frühere Einträge</a>
                <a class="nav-item nav-link style55 text-center fw-light text-body bg-secondary-subtle text-md-center w-50 h-auto align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 align-self-lg-center pt-lg-4 pb-lg-4 d-none d-lg-block" dmx-on:click="run({run:{outputType:'text',action:`modal2.show()`}})">Logout</a>
                <a class="nav-item nav-link style55 text-center fw-light text-body bg-secondary-subtle text-md-center w-50 h-auto align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 align-self-lg-center pt-lg-4 pb-lg-4 d-lg-none" dmx-on:click="run({run:{outputType:'text',action:`modal2.show()`}})">Logout</a>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>

When the update has run you can't get any response from the buttons at all, to be more clear. It behaves like a block of text, where you can only copy the text when double-clicking.

Maybe I'm doing something wrong here? I'm not a very experienced programmer, so if you can point me in the right direction I would very much appreciate that!

Thanks again for your time and effort!

[famousmag]

Hey @Michel2 ,

You are talking about an offCanvas that I can find in your code above as "offcanvas_datacall_paged1" and about a Modal that I cannot find in your code...

I see in your code that in one of the links, you have your offcanvas call with different name:

The one link calls "_paged" the other "_paged1"..

1. You have two OffCanvas or one?

2. You have the links in your header that call/show the OffCanvas but these two buttons are
   a) the one hidden for lg-breakpoint and above
   b) the other hidden for up to md-breakpoint

3. You call inside your tablerepeat, modal1.show() and in your links modal2().show()... You have 1 Modal or Two?

4. You hide the OffCanvas on lg-breakpoint and above... There is no reason to hide the OffCanvas

I would leave only one link for the offCanvas, show when it should be hidden ( for example lg and above), then one OffCanvas for this link and make sure to trigger the correct OffCanvas...

The same I would do for the Modals...

Can you please check the above?
And if you still have issues, report what exactly is the problem

[Michel2]

I'm sorry, maybe it's not clear, but that's indeed what I did. I made two off-canvasses, one is showing on mobile and tablets, the other one when resolutions are higher. So, I also have two buttons in the menu. One is shown on mobile view and tablets, and the other button is visible when the resolution is laptop and above. In case of button 1 it calls off-canvas1 (paged1) and in the case of button 2 it calls for off-canvas2 (paged).

So that would be your solution as well as I understand it.

Nonetheless, when I apply the update, meaning lib/core/app.js and dmxAppConnect.js and dmxRouting.js, it doesn't function anymore, where it does now.

So my question is, how to prevent this from happening, or beter still, why is this happening? It can be my fault of course, I'd bet on it actually, but then I don't understand where I made it, seeing as when i remove the updates and revert everything is working like it should.

Thanks for looking into the code by the way. And I understand the confusion, it's not really nice in naming or solutions, but it's an older app that I have to update now.

[Michel2]

Here is the complete code by the way, so it might make more sense when looking at the structure. I fixed some naming with the canvasses, but that didn't make any difference as expected.

<!-- Wappler include head-page="layouts/backend_layout" fontawesome_5="cdn" is="dmx-app" id="index" appconnect="local" components="{dmxFormRepeat:{},dmxSummernote:{},dmxSummernoteFileUpload:{},dmxValidator:{},dmxDropzone:{},dmxBootstrap5Tooltips:{},dmxNotifications:{},dmxBrowser:{}}" jquery_slim_35="cdn" bootstrap_icons="local" bootstrap5="local" class="style86" -->
<dmx-serverconnect id="conn_get_month" url="/api/datacall/datacallmonths"></dmx-serverconnect>
<div is="dmx-browser" id="browser1"></div>
<dmx-notifications id="notifies1" closable="true" align="center" timeout="3000" show-duration="300" offset-y="500"></dmx-notifications>
<dmx-serverconnect id="conn_dataput" url="/api/dataput/dataput" noload="true"></dmx-serverconnect>


<dmx-serverconnect id="conn_get_additional_data" url="/api/datacall/datacall" noload="true"></dmx-serverconnect>
<dmx-serverconnect id="conn_get_assets_data" url="/api/datacall/datacallassets"></dmx-serverconnect>
<div class="container-fluid bg-light gx-lg-5 style87">
    <div class="row style88">
        <div class="col-xxl-2 col-md-1 col-sm-1 d-none d-sm-block col-lg-1 col-xl-1"></div>
        <div class="col-lg col-xl style85 mt-lg-5 mt-5">
            <form method="post" class="style9" dmx-on:success="run([{run:{outputType:'text',action:`notifies1.success(\'Daten hinzugefügt\')`}},{wait:{delay:2000}},{run:{outputType:'text',action:`form1.reset()`}},{run:{outputType:'text',action:`browser1.reload();browser1.scrollYTo(1,\'smooth\')`}}])" id="janform1" action="/api/dataput/dataput" is="dmx-serverconnect-form">
                <div class="form-group style24 rounded-top col-xxl-11 col-xl-11 col-lg-11 col-md-11 col-12 ms-md-3 ms-xl-3 ms-sm-2 ms-xxl-3 mt-3 pt-3 mt-lg-5 ms-lg-3 col-sm-11" is="dmx-input-group">
                    <label class="form-label style12 ps-3 pe-2">Vermögenswert/Ware auswählen:</label>
                    <select id="Assets_select" class="form-select style25" dmx-bind:options="conn_get_assets_data.data.query" optiontext="assetname_DE" optionvalue="additions_asset_id" dmx-on:click="" name="Assets_select">
                    </select>
                </div>
                <div class="form-group style24 col-xxl-11 col-xl-11 col-lg-11 col-md-11 col-sm-11 col-12 ms-md-3 ms-lg-3 ms-xl-3 ms-sm-2 ms-xxl-3 rounded-0 pt-3" is="dmx-input-group">
                    <label for="select_month" class="form-label style83 ps-3 pe-2">Wähle Monat und Jahr:</label>
                    <select id="select_month" class="form-select" optiontext="monat_jahr" optionvalue="months_id" required="" name="select_month" dmx-bind:options="conn_get_month.data.query">
                    </select>
                </div>
                <div class="form-group mt-xl-4 mt-lg-3 mt-md-2 mt-sm-3 mb-sm-2 mt-xxl-5 style13 col-md-12 col-12 col-xxl-10 col-xl-10 col-lg-9" is="dmx-input-group">
                    <label class="form-label col-form-label-sm style53 ms-md-3 ms-sm-2 mt-4">Tendenz</label>

                    <select id="tendenz_select" class="form-select mt-0 form-select-sm style14 ms-md-3 ms-sm-2" name="tendenz_select" dmx-bind:value="selectedValue">
                        <option value="long">Long</option>
                        <option value="short">Short</option>
                        <option selected="" value="Hold">Hold</option>
                    </select>
                </div>
                <div class="form-group mb-3 row">
                    <label for="tendenz_chance" class="col-sm-1 style44 col-form-label-sm ms-sm-3 ms-xxl-5 ms-xl-5 ms-lg-5 col pb-md-0 col-form-label ms-1 pb-0">Chance in %</label>
                    <div class="ms-sm-1 offset-sm-1 col-sm-4">
                        <input id="tendenz_chance" name="tendenz_chance" class="form-control form-control-sm style80 ms-sm-1 pt-sm-0 ms-md-2 ms-lg-5" placeholder="000,00" max="100" data-rule-max="100" min="0" data-rule-min="0" required="" oninput="validateInput(this)">

                    </div>
                </div>
                <div class="form-group mb-3 row style48">
                    <label for="tendenz_risiko" class="col-sm-1 style44 col-form-label-sm ms-sm-3 ms-xxl-5 ms-xl-5 ms-lg-5 col pb-md-0 col-form-label ms-1 pb-0">Risiko in %</label>
                    <div class="col-sm-4 style82">
                        <input id="tendenz_risiko" name="tendenz_risiko" class="form-control form-control-sm style80 ms-sm-1 pt-sm-0 ms-md-2 ms-lg-5" placeholder="000,00" max="100" data-rule-max="100" min="0" data-rule-min="0" required="" oninput="validateInput(this)">
                    </div>
                </div>
                <div class="form-group mb-3 row style58">
                    <div class="col-sm-6 col-lg-2 style91 col-xl-1 col-md-2 col-12">
                        <h6 class="fw-lighter style90 ms-3">Bilder hochladen für {{Assets_select.selectedText}}:</h6>
                    </div>
                    <div class="offset-lg-1 style92 offset-xl-1 col-xl-9 col-md-9 col-lg-8 col-sm-11">
                        <input type="file" class="form-control style63 mt-2" multiple="true" id="fileinputshort" name="fileinputshort" aria-describedby="input7_help" is="dmx-dropzone" thumb-width="200" thumb-height="200" message="Bilder hochladen (max. 3)" accept=".jpg,.jpeg,.gif,.png,.svg" data-rule-maxtotalsize="50000000" data-rule-maxfiles="3">
                    </div>
                </div>


                <div class="form-group style22 col-xxl-11 col-md-11 col-sm-11 col-lg-11 col-xl-11 me-md-3 col mb-sm-2 ms-sm-3 ms-1">
                    <small id="bs5-form-group-help9" class="form-text text-muted style8">Stop-Loss</small>
                    <input id="stoploss" name="stoploss" class="form-control style72" placeholder="000,00" maxlength="9" required="">
                </div>
                <div class="form-group style23 col-xxl-11 col-md-11 col-sm-11 col-lg-11 col-xl mb-sm-2 ms-sm-3 pb-sm-2 me-md-3 pb-md-2 pb-lg-2 pb-xl-2 ms-1 pb-2">
                    <small id="bs5-form-group-help10" class="form-text text-muted style8">Take-Profit&nbsp;</small>
                    <input id="takeprofit" name="takeprofit" type="text" class="form-control style20" placeholder="000,00" maxlength="9" required="">
                </div>
                <div class="form-group mb-3 row style21">
                    <div class="col-auto col-lg-1 fw-light ms-md-2 col-xxl-1">
                        <h6 class="style10 ms-1 fw-lighter ms-sm-2">Zusätzlicher Text zu {{Assets_select.selectedText}}:<br><br>Um nur eine Zeile einzufügen, verwenden Sie Umschalt<br>+<br>Eingabetaste</h6>
                    </div>
                    <div class="style27 col-xxl-9 col-12 offset-xxl-1 offset-xl-1 offset-lg-1 offset-md-1 col-xl-9 col-lg-9 offset-sm-1 col-sm-10 col-md-10" id="extratext">
                        <textarea id="editor1" name="extratext" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['insert',['link']],['view',['fullscreen','codeview','help']]]" placeholder="zusätzlicher Text" height="200" max-height="600" disable-drop="true" lang="de-DE" theme="bootstrap5"></textarea>


                        <link rel="stylesheet" href="/css/style.css" />
                    </div>

                </div>
                <div class="form-group mb-3 row style59">
                    <div class="text-end col-xxl-7 col-xl-7 offset-lg-3 offset-xl-5 offset-xxl-4 col-lg-9 col-sm-11 col-md-11">
                        <button id="btn2" class="btn bg-secondary text-light" type="reset" dmx-on:click="form1.reset();notifies1.success('Form reset!')"><i class="far fa-window-close fa-lg style11"></i>&nbsp;Cancel&nbsp;</button>
                        <button id="btn1" class="btn text-light bg-danger" type="submit" dmx-on:click=""><i class="far fa-save fa-lg"></i>&nbsp;Speichern</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="offset-1 col-auto col-1 offset-lg-1 style62 rounded rounded-2"></div>
    </div>
</div>
<meta name="ac:route" content="/backend">

This is for the page itself.

[Michel2]

<!doctype html>
<html>

<head>
  <base href="/">
  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <meta charset="UTF-8">
  <title><%=_('\'Additions to Database\'')%></title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/style.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="/dmxAppConnect/dmxFormRepeat/dmxFormRepeat.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxSummernote/summernote-bs5.min.css" />
  <script src="/dmxAppConnect/dmxSummernote/summernote-bs5.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-de-DE.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/dmxSummernote.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxDropzone/dmxDropzone.css" />
  <script src="/dmxAppConnect/dmxDropzone/dmxDropzone.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernoteFileUpload/summernote-upload.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
  <script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxNotifications/dmxNotifications.css" />
  <script src="/dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>
  <script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
  <script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxAnimateCSS/animate.min.css" />
  <script src="/dmxAppConnect/dmxAnimateCSS/dmxAnimateCSS.js" defer></script>
  <script src="/dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5PagingGenerator/dmxBootstrap5PagingGenerator.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
</head>

<body is="dmx-app" id="main" style="--bs-body-bg: #fcfcfc;" class="style90">

  <div is="dmx-browser" id="browser1"></div>

  <dmx-notifications id="notifies_success" align="center" offset-y="500" timeout="2500" closable="true" show-duration="250"></dmx-notifications>
  <dmx-serverconnect id="conn_get_month_single" url="/api/datacall/datacallsinglemonth" noload="true"></dmx-serverconnect>
  <dmx-serverconnect id="conn_remove_record" url="/api/dataremove/dataremove" noload="true"></dmx-serverconnect>
  <dmx-serverconnect id="conn_get_single_rec" url="/api/datacall/datacall_singlerecord" noload="true" dmx-param:additions_id=""></dmx-serverconnect>
  <dmx-serverconnect id="conn_logout" url="/api/security/logout" noload="true"></dmx-serverconnect>
  <dmx-serverconnect id="conn_datacall_paged" url="/api/datacall/datacall_paged" dmx-param:offset="query.offset" dmx-param:limit="9"></dmx-serverconnect>
  <dmx-query-manager id="query1"></dmx-query-manager>
  <div class="modal border-0 fade" id="modal1" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header shadow-none border-0 bg-warning">
          <h5 class="modal-title fw-light">Datensatz entfernen?</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body shadow-none bg-body-tertiary">
          <input id="text1" name="text1" type="text" class="form-control visually-hidden" readonly="true">
          <input id="text2" name="text2" type="text" class="form-control form-control-sm mt-3" readonly="true" dmx-bind:value="">
        </div>
        <div class="modal-footer border-0 bg-light">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-bs-target="#modal1" dmx-on:click="modal1.hide()">Close</button>
          <button type="button" class="btn btn-danger" dmx-on:click="run([{run:{outputType:'text',action:`conn_remove_record.load({additions_id: text1.value})`}},{run:{outputType:'text',action:`notifies_success.success(\'Erfolgreich gelöscht\')`}},{wait:{delay:1000}},{run:{outputType:'text',action:`modal1.hide()`}},{run:{outputType:'text',action:`conn_datacall_paged.load({})`}}])">Entfernen</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="modal2" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h5 class="modal-title fw-light">Möchten Sie sich abmelden?</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="fw-lighter">Sie werden erneut zur Anmeldeseite weitergeleitet...</p>
        </div>
        <div class="modal-footer border-0">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary bg-danger" dmx-on:click="run([{run:{outputType:'text',action:`notifies_success.warning(\'Logout...\')`}},{wait:{delay:2000}},{run:{outputType:'text',action:`conn_logout.load({})`}},{run:{outputType:'text',action:`browser1.goto(\'/login\')`}}])">Logout</button>
        </div>
      </div>
    </div>
  </div>
  <div class="offcanvas offcanvas-end bg-secondary bg-opacity-50 rounded-start rounded-2 style77 w-auto d-none d-lg-block" id="offcanvas_datacall_paged1" is="dmx-bs5-offcanvas" tabindex="-1">
    <div class="offcanvas-header style76 pt-1">
      <button id="btn4" class="btn text-white btn-sm mt-2" dmx-animate-enter="bounceIn" dmx-on:click="offcanvas_datacall_paged1.hide()"><i class="fas fa-window-close fa-2x"></i></button>
      <h5 class="offcanvas-title text-light ms-xl-2 ms-lg-2 ms-md-2 mt-1 ms-2 ms-sm-2 mt-xxl-1 ms-xxl-3">frühere Einträge</h5>

    </div>
    <div class="offcanvas-body pt-1">
      <div class="table-responsive">
        <div class="table-responsive">
          <table class="table table-sm">
            <thead>
              <tr>
                <th scope="row" class="pt-2 pb-2 bg-body-secondary style79">undefined</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">ID</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Assetname</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Datum hinzugefügt</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary visually-hidden">Additions asset</th>
                <th scope="row" class="fw-light bg-body-secondary pt-2 pb-2">Monat und Jahr</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz Chance</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz Risiko</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary d-none d-lg-table-cell">Bemerkungen</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Stoploss</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Takeprofit</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary visually-hidden">Assetname</th>
              </tr>
            </thead>
            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_datacall_paged.data.query.data" id="tableRepeat2">
              <tr>
                <td class="bg-body-tertiary">
                  <button id="modalbtn1" class="btn text-danger mb-2" dmx-on:click="run([{run:{outputType:'text',action:`modal1.show()`}},{run:{outputType:'text',action:`modal1.text1.setValue(additions_id)`}},{run:{outputType:'text',action:`modal1.text2.setValue(\'Record: \'+additions_id+\', hinzugefügt: \'+added_date.formatDate(\'dd-MM-yyyy HH:mm\')+\', mit Ware: \'+assetname_DE)`}}])"><i class="far fa-times-circle fa-lg"></i></button>
                </td>
                <td class="bg-body-tertiary pt-2" dmx-text="additions_id"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="assetname_DE"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="added_date.formatDate('dd-MM-yyyy HH:mm')"></td>
                <td class="bg-body-tertiary visually-hidden pt-2" dmx-text="additions_asset_id"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="monat_jahr"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz_chance"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz_risk"></td>
                <td class="bg-body-tertiary d-none d-lg-table-cell pt-2" dmx-text="remarks.trunc(50, 'true', '...')"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="stoploss"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="takeprofit"></td>
                <td class="bg-body-tertiary visually-hidden pt-2" dmx-text="assetname_EN"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <ul class="pagination mt-2" dmx-populate="conn_datacall_paged.data.query" dmx-state="query1" dmx-offset="offset" dmx-generator="bs5paging">
        <li class="page-item" dmx-class:disabled="conn_datacall_paged.data.query.page.current == 1" aria-label="First">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',conn_datacall_paged.data.query.page.offset.first)"><span aria-hidden="true">‹‹</span></a>
        </li>
        <li class="page-item" dmx-class:disabled="conn_datacall_paged.data.query.page.current == 1" aria-label="Previous">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',conn_datacall_paged.data.query.page.offset.prev)"><span aria-hidden="true">‹</span></a>
        </li>
        <li class="page-item" dmx-class:active="title == conn_datacall_paged.data.query.page.current" dmx-class:disabled="!active" dmx-repeat="conn_datacall_paged.data.query.getServerConnectPagination(2,1,'...')">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',(page-1)*conn_datacall_paged.data.query.limit)">{{title}}</a>
        </li>
        <li class="page-item" dmx-class:disabled="conn_datacall_paged.data.query.page.current ==  conn_datacall_paged.data.query.page.total" aria-label="Next">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',conn_datacall_paged.data.query.page.offset.next)"><span aria-hidden="true">›</span></a>
        </li>
        <li class="page-item" dmx-class:disabled="conn_datacall_paged.data.query.page.current ==  conn_datacall_paged.data.query.page.total" aria-label="Last">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',conn_datacall_paged.data.query.page.offset.last)"><span aria-hidden="true">››</span></a>
        </li>
      </ul>
    </div>
  </div>
  <div class="offcanvas offcanvas-end bg-secondary bg-opacity-50 rounded-start rounded-2 style77 d-lg-none w-auto" id="offcanvas_datacall_paged2" is="dmx-bs5-offcanvas" tabindex="-1">
    <div class="offcanvas-header style76 pt-1">
      <button id="btn1" class="btn text-white btn-sm mt-2" dmx-animate-enter="bounceIn" dmx-on:click="offcanvas_datacall_paged2.hide()"><i class="fas fa-window-close fa-2x"></i></button>
      <h5 class="offcanvas-title text-light ms-xl-2 ms-lg-2 ms-md-2 mt-1 ms-2 ms-sm-2 mt-xxl-1 ms-xxl-3">frühere Einträge</h5>

    </div>
    <div class="offcanvas-body pt-1">
      <div class="table-responsive">
        <div class="table-responsive">
          <table class="table table-sm">
            <thead>
              <tr>
                <th scope="row" class="pt-2 pb-2 bg-body-secondary style79">undefined</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">ID</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Assetname</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Datum hinzugefügt</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary visually-hidden">Additions asset</th>
                <th scope="row" class="fw-light bg-body-secondary pt-2 pb-2">Monat und Jahr</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz Chance</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Tendenz Risiko</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary d-none d-lg-table-cell">Bemerkungen</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Stoploss</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary">Takeprofit</th>
                <th class="fw-light pt-2 pb-2 bg-body-secondary visually-hidden">Assetname</th>
              </tr>
            </thead>
            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_datacall_paged.data.query.data" id="tableRepeat1">
              <tr>
                <td class="bg-body-tertiary">
                  <button id="modalbtn2" class="btn text-danger mb-2" dmx-on:click="run([{run:{outputType:'text',action:`modal1.show()`}},{run:{outputType:'text',action:`modal1.text1.setValue(additions_id)`}},{run:{outputType:'text',action:`modal1.text2.setValue(\'Record: \'+additions_id+\', hinzugefügt: \'+added_date.formatDate(\'dd-MM-yyyy HH:mm\')+\', mit Ware: \'+assetname_DE)`}}])"><i class="far fa-times-circle fa-lg"></i></button>
                </td>
                <td class="bg-body-tertiary pt-2" dmx-text="additions_id"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="assetname_DE"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="added_date.formatDate('dd-MM-yyyy HH:mm')"></td>
                <td class="bg-body-tertiary visually-hidden pt-2" dmx-text="additions_asset_id"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="monat_jahr"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz_chance"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="tendenz_risk"></td>
                <td class="bg-body-tertiary d-none d-lg-table-cell pt-2" dmx-text="remarks.trunc(50, 'true', '...')"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="stoploss"></td>
                <td class="bg-body-tertiary pt-2" dmx-text="takeprofit"></td>
                <td class="bg-body-tertiary visually-hidden pt-2" dmx-text="assetname_EN"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <ul class="pagination mt-2" dmx-populate="conn_datacall_paged.data.query" dmx-state="query1" dmx-offset="offset" dmx-generator="bs5paging">
        <li class="page-item" dmx-class:disabled="conn_datacall_paged.data.query.page.current == 1" aria-label="First">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',conn_datacall_paged.data.query.page.offset.first)"><span aria-hidden="true">‹‹</span></a>
        </li>
        <li class="page-item" dmx-class:disabled="conn_datacall_paged.data.query.page.current == 1" aria-label="Previous">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',conn_datacall_paged.data.query.page.offset.prev)"><span aria-hidden="true">‹</span></a>
        </li>
        <li class="page-item" dmx-class:active="title == conn_datacall_paged.data.query.page.current" dmx-class:disabled="!active" dmx-repeat="conn_datacall_paged.data.query.getServerConnectPagination(2,1,'...')">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',(page-1)*conn_datacall_paged.data.query.limit)">{{title}}</a>
        </li>
        <li class="page-item" dmx-class:disabled="conn_datacall_paged.data.query.page.current ==  conn_datacall_paged.data.query.page.total" aria-label="Next">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',conn_datacall_paged.data.query.page.offset.next)"><span aria-hidden="true">›</span></a>
        </li>
        <li class="page-item" dmx-class:disabled="conn_datacall_paged.data.query.page.current ==  conn_datacall_paged.data.query.page.total" aria-label="Last">
          <a href="javascript:void(0)" class="page-link" dmx-on:click="query1.set('offset',conn_datacall_paged.data.query.page.offset.last)"><span aria-hidden="true">››</span></a>
        </li>
      </ul>
    </div>
  </div>



  <header class="container-fluid">
    <div class="text-black-50 container-fluid">
      <div class="row row-cols-5 row-cols-xxl-7">
        <div class="col-7 col-xxl">
          <nav class="navbar navbar-expand-lg fixed-top">
            <a class="navbar-brand style36 fw-light bg-secondary-subtle mt-md-2 ms-md-2 mt-sm-2 ms-sm-2 mt-2 mb-3 ms-2 mb-lg-4 ms-lg-3" href="#">Backend GOAT app</a>
            <span class="navbar-text fw-lighter me-2 d-none d-lg-block mb-lg-3">version 1.0.4</span>
            <button class="navbar-toggler style71 bg-secondary-subtle" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end style90" id="navbar1_collapse">
              <div class="navbar-nav flex-md-row-reverse flex-md-wrap flex-lg-nowrap flex-lg-row">
                <a class="nav-item nav-link active style73 w-50 fw-light text-body bg-secondary-subtle text-center text-md-center align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 mt-sm-3 me-sm-3 ps-sm-3 mt-md-4 me-md-3 align-self-lg-center mb-lg-3 d-none d-lg-block" dmx-on:click="offcanvas_datacall_paged1.show()">frühere Einträge</a>
                <a class="nav-item nav-link active style73 w-50 fw-light text-body bg-secondary-subtle text-center text-md-center align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 mt-sm-3 me-sm-3 ps-sm-3 mt-md-4 me-md-3 align-self-lg-center mb-lg-3 d-lg-none" dmx-on:click="offcanvas_datacall_paged2.show()">frühere Einträge</a>
                <a class="nav-item nav-link style55 text-center fw-light text-body bg-secondary-subtle text-md-center w-50 h-auto align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 align-self-lg-center pt-lg-4 pb-lg-4 d-none d-lg-block" dmx-on:click="run({run:{outputType:'text',action:`modal2.show()`}})">Logout</a>
                <a class="nav-item nav-link style55 text-center fw-light text-body bg-secondary-subtle text-md-center w-50 h-auto align-self-sm-end align-self-end mt-2 ms-2 me-3 pt-3 pb-3 align-self-lg-center pt-lg-4 pb-lg-4 d-lg-none" dmx-on:click="run({run:{outputType:'text',action:`modal2.show()`}})">Logout</a>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>
  <div is="dmx-view" id="content" class="style90">
    <%- await include(content, locals); %>
  </div>
  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
        function validateInput(input) {
            let commaCount = (input.value.match(/,/g) || []).length; // Count commas

            // Check if there is more than one comma
            if (commaCount > 1) {
                input.setCustomValidity('Bitte geben Sie nur ein Komma ein.');
                input.classList.add('is-invalid');  // Apply invalid class
            } else {
                // Replace the comma with a period for parsing
                let value = input.value.replace(',', '.');
                let number = parseFloat(value);

                // Validate if the number is between 0 and 100
                if (!isNaN(number) && number >= 0 && number <= 100) {
                    input.setCustomValidity('');  // Clear error if valid
                    input.classList.remove('is-invalid');  // Remove invalid class
                    input.classList.add('is-valid');  // Optionally add valid class
                } else {
                    input.setCustomValidity('Bitte geben Sie eine Zahl zwischen 0 und 100 ein.');
                    input.classList.add('is-invalid');  // Apply invalid class
                }
            }

            input.reportValidity();  // Display the error message if any
        }

        // Attach the input event listener to the input field (e.g., 'tendenz_chance')
        document.getElementById('tendenz_chance').oninput = function() {
            validateInput(this);
        };
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
        function validateInput(input) {
            let commaCount = (input.value.match(/,/g) || []).length; // Count commas

            // Check if there is more than one comma
            if (commaCount > 1) {
                input.setCustomValidity('Bitte geben Sie nur ein Komma ein.');
                input.classList.add('is-invalid');  // Apply invalid class
            } else {
                // Replace the comma with a period for parsing
                let value = input.value.replace(',', '.');
                let number = parseFloat(value);

                // Validate if the number is between 0 and 100
                if (!isNaN(number) && number >= 0 && number <= 100) {
                    input.setCustomValidity('');  // Clear error if valid
                    input.classList.remove('is-invalid');  // Remove invalid class
                    input.classList.add('is-valid');  // Optionally add valid class
                } else {
                    input.setCustomValidity('Bitte geben Sie eine Zahl zwischen 0 und 100 ein.');
                    input.classList.add('is-invalid');  // Apply invalid class
                }
            }

            input.reportValidity();  // Display the error message if any
        }

        // Attach the input event listener to the input field (e.g., 'tendenz_chance')
        document.getElementById('tendenz_risiko').oninput = function() {
            validateInput(this);
        };
    });
  </script>





  <script>
    document.addEventListener('DOMContentLoaded', function () {
        function validateNonNegativeInput(input) {
            let commaCount = (input.value.match(/,/g) || []).length; // Count commas

            // Check if there is more than one comma
            if (commaCount > 1) {
                input.setCustomValidity('Bitte geben Sie nur ein Komma ein.');
                input.classList.add('is-invalid');  // Apply invalid class
            } else {
                // Replace the comma with a period for parsing
                let value = input.value.replace(',', '.');
                let number = parseFloat(value);

                // Validate if the input is not a valid number
                if (isNaN(number)) {
                    input.setCustomValidity('Bitte geben Sie eine gültige Zahl ein.');
                    input.classList.add('is-invalid');  // Apply invalid class
                }
                // Validate if the number is negative
                else if (number < 0) {
                    input.setCustomValidity('Bitte geben Sie eine nicht-negative Zahl ein.');
                    input.classList.add('is-invalid');  // Apply invalid class
                } else {
                    // Clear any custom error if the input is valid
                    input.setCustomValidity('');
                    input.classList.remove('is-invalid');  // Remove invalid class
                    input.classList.add('is-valid');  // Optionally apply valid class
                }
            }

            // Trigger the standard form validation response
            input.reportValidity();
        }

        // Attach the input event listener to the input field (e.g., 'stoploss')
        document.getElementById('takeprofit').oninput = function() {
            validateNonNegativeInput(this);
        };
    });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
        function validateNonNegativeInput(input) {
            let commaCount = (input.value.match(/,/g) || []).length; // Count commas

            // Check if there is more than one comma
            if (commaCount > 1) {
                input.setCustomValidity('Bitte geben Sie nur ein Komma ein.');
                input.classList.add('is-invalid');  // Apply invalid class
            } else {
                // Replace the comma with a period for parsing
                let value = input.value.replace(',', '.');
                let number = parseFloat(value);

                // Validate if the input is not a valid number
                if (isNaN(number)) {
                    input.setCustomValidity('Bitte geben Sie eine gültige Zahl ein.');
                    input.classList.add('is-invalid');  // Apply invalid class
                }
                // Validate if the number is negative
                else if (number < 0) {
                    input.setCustomValidity('Bitte geben Sie eine nicht-negative Zahl ein.');
                    input.classList.add('is-invalid');  // Apply invalid class
                } else {
                    // Clear any custom error if the input is valid
                    input.setCustomValidity('');
                    input.classList.remove('is-invalid');  // Remove invalid class
                    input.classList.add('is-valid');  // Optionally apply valid class
                }
            }

            // Trigger the standard form validation response
            input.reportValidity();
        }

        // Attach the input event listener to the input field (e.g., 'stoploss')
        document.getElementById('stoploss').oninput = function() {
            validateNonNegativeInput(this);
        };
    });
  </script>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
    var form = document.querySelector("janform1"); // Select your form by its ID or class if needed
    
    form.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            event.preventDefault(); // Prevent the form from being submitted
        }
    });
});
  </script>

</body>

</html>

This is for the layout-page.

[Michel2]

When the update is applied, the console in the browser gives these errors where there were none before:

BaseComponent.js:59 TypeError: Cannot read properties of null (reading 'startsWith')
    at s._stateHandler (link.js:117:1)
    at s.init (link.js:33:1)
    at s.constructor (BaseComponent.js:48:1)
    at s (api.js:5:1)
    at t.hasOwnProperty.t.constructor (api.js:47:1)
    at new s (api.js:5:1)
    at s.$createChild (BaseComponent.js:139:1)
    at s.<anonymous> (BaseComponent.js:271:1)
    at Object.walk (dom.js:186:1)
    at Object.walk (dom.js:191:1)

Maybe this will help to debug?

[ben]

The problem lies with

<!-- Wappler include head-page="layouts/backend_layout" fontawesome_5="cdn" is="dmx-app" id="index" appconnect="local" components="{dmxFormRepeat:{},dmxSummernote:{},dmxSummernoteFileUpload:{},dmxValidator:{},dmxDropzone:{},dmxBootstrap5Tooltips:{},dmxNotifications:{},dmxBrowser:{}}" jquery_slim_35="cdn" bootstrap_icons="local" bootstrap5="local" class="style86" -->

There is no mention of offcanvas and modal. Could this be because you have copied and pasted the code rather than use Wappler to insert these?

[franse]

@Michel2

When the update is applied, the console in the browser gives these errors where there were none before:

BaseComponent.js:59 TypeError: Cannot read properties of null (reading 'startsWith')

Same as this?

Can not read properties of null (reading 'startsWith')

Wappler Version : 6.8.0 - with updated extensions released yesterday 20 Sep 24 Operating System : MacOS 15.0 Server Model: NodeJS Database Type: PostgrSQL Hosting Type: Docker local Expected behavior Clicking on a button to direct to another page, should not dispaly an error in the Console. Actual behavior Clicking on a button to direct to another page using the dmx-on:click="browser1.goto('/dashboard' ,true) Gives this error in the browser console. Although I get directed to the correct …

[ben]

To rectify what I have stated above, use Wappler to add an extra modal and offcanvas and subsequently, remove the extras. This will add the components to the page, with this as the result:

<!-- Wappler include head-page="layouts/backend_layout" fontawesome_5="cdn" is="dmx-app" id="index" appconnect="local" components="{dmxFormRepeat:{},dmxSummernote:{},dmxSummernoteFileUpload:{},dmxValidator:{},dmxDropzone:{},dmxBootstrap5Tooltips:{},dmxNotifications:{},dmxBrowser:{},dmxBootstrap5Modal:{},dmxBootstrap5Offcanvas:{}}" jquery_slim_35="cdn" bootstrap_icons="local" bootstrap5="local" class="style86" -->

[famousmag]

Hey again,

Beside @Ben suggestion that make sense but considering that offcanvas component is already included in your layout page I don't know if that is a problem...
Is it @Ben?
(I have a related post asking for this here:)

How dmx-components includes are added in a content page?

Hey guys, Here is a quick one... I'm pasting a collapse component in an empty content page: <div class="collapse w-100" id="collapseFilters" is="dmx-bs5-collapse" dmx-bind:show=""></div> And automatically the include is added... <!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="contentpage" appConnect="local" components="{dmxBootstrap5Collapse:{}}" --> Now, if I paste a Dynamic OffCanvas <div class="offcanvas offcanvas-start" id="offcan…

@Michel2, in the code of your pages you shared, I noticed a few things...
Most of them are related to how you validate your inputs.
You do a mix of wappler and javascript validating there that I think that rise unwanted warnings and errors...

1. In your content page you have a few input-groups like:

<div class="form-group mt-xl-4 mt-lg-3 mt-md-2 mt-sm-3 mb-sm-2 mt-xxl-5 style13 col-md-12 col-12 col-xxl-10 col-xl-10 col-lg-9" is="dmx-input-group">
                    <label class="form-label col-form-label-sm style53 ms-md-3 ms-sm-2 mt-4">Tendenz</label>

                    <select id="tendenz_select" class="form-select mt-0 form-select-sm style14 ms-md-3 ms-sm-2" name="tendenz_select" dmx-bind:value="selectedValue">
                        <option value="long">Long</option>
                        <option value="short">Short</option>
                        <option selected="" value="Hold">Hold</option>
                    </select>
                </div>

a) what is the is="dmx-input-group" ?
b) you have defined oninput="validateInput(this)"
You defined a static input event there and call a javascript function.
This function is located in a script inside a document.addEventListener('DOMContentLoaded', function () {......}
c) also inside this eventlistener you attach again the oninput eventlistener
document.getElementById('tendenz_chance').oninput = function() { validateInput(this); };

I see that you validate the inputs normally the wappler way...
max="100" data-rule-max="100" min="0" data-rule-min="0" required=""

If you need to do further validation using javascript, (first please backup your files!! and then) handle the validation using a more wappler friendly way:

1. Create a .js file handling your javascript and put inside it the validate function

function validateInput(input) {
..do the validations you need in here..
}

2. on your inputs you need to validate, attach a dmx-on:changed or a dmx-on:update dynamic events (depending on if you need to validate the input on initialization or only when user changes its content) and for these events add a flow and run the validateInput function ("Run Javascript" action)

Beside that, the OffCanvas and the Modals are working from what I can see...

I hope we help you make your code more clear and effective

[Michel2]

I tried your solution @ben, but to no avail. When applying the update, the offcanvasses don't show up. Same response as before...

Thanks for your help though, I appreciate it very much!

[Michel2]

I adjusted the script with the suggestions you give and did some refactoring with a little help as well, and now most of the errors that I had are gone, but the update still has the same effect that the buttons stop working and the offcanvas doesn't show.

And, before I added the custom Javascript to do the validation the update had the same effect.

Thanks for the input though, it was very welcome and helped me to restructure the code in a better way!

[Michel2]

Yes exactly like that!

This is the response from the console when openeing the page after the update:

BaseComponent.js:59 TypeError: Cannot read properties of null (reading 'startsWith')
at s._stateHandler (link.js:117:1)
at s.init (link.js:33:1)
at s.constructor (BaseComponent.js:48:1)
at s (api.js:5:1)
at t.hasOwnProperty.t.constructor (api.js:47:1)
at new s (api.js:5:1)
at s.$createChild (BaseComponent.js:139:1)
at s. (BaseComponent.js:271:1)
at Object.walk (dom.js:186:1)
at Object.walk (dom.js:191:1)

To add to this, without the update I have 0 errors in the console when loading the page.

Thanks @franse! You helped me out before too with another issue, so thanks again for your help!

[famousmag]

@Michel2

but the update still has the same effect that the buttons stop working and the offcanvas doesn't show.

1. When you say update you mean wappler update?

2. The offcanvas were triggered fine to me when I run your code on the browser (in both breakpoints md- and lg+)...
   You click on the buttons and offcanvas doesn't show?

When I run your code I also get this "baseComponent" warning pointing to input-group...

But when I deleted the is="dmx-input-group" from the three form inputs in your content page this warning stopped.

[Michel2]

I mean the 'in-program' update, when you open it or restart Wappler. So it asks to update certain parts of Wappler. In this case it's lib/core/app.js and dmxAppConnect.js and dmxRouting.js that would get updated.

I hope there is a solution for this. I don't understand why this is happening, because my other projects update fine and work like expected.

Ans thanks @famousmag, I deleted these references to input-group as well, so no more warnings there.

[Michel2]

Thank you all, I tried it again today, with the new updates added by the Wappler-team, and it works now. I guess something to do with what @franse also mentioned before and someone else had a problem with.

It's fixed! Nice!!