Basics not working - what is the problem?

[Engel]

Hello

I worked through Ben Pleysiers super Node JS series.

However, the Register-Form is not writing the entries to the db. I started debugging with help of DevTools as recommended here: Debugging Server Connect Errors

This brought me to a much more basic problem: In DevTools / Network / XHR Tab no activity is recorded. But even worse and more basic not even basic links of the main page to static subpages are working. In DevTools / Console these messages pop up when I load the page:

So I believe something very basic is not working here. Anyone an idea what I have to do in order to get the system in its basic up and running?

System check, green dot etc. is all OK.

Thanks for any hints -

Thomas

[Teodor]

You can ignore the .map files warnings in the console. These are not errors and the .map files are used for our own debugging purposes.

So maybe you can explain what exactly are you doing on the page and what is wrong.

[Engel]

I am trying to set up a dynmaic site to share stuff (e.g. recipies) and worked through the mondes des chefs case from Ben Pleysier.

I dont understand why the Registration is not written to the database and more basic why the basic links contact, about etc. are not working. See here for better understanding:

So I believe I have something very basic broken.

[Teodor]

So what do the dev tools say when your form is being submitted:

Debugging Server Connect Errors

You can easily debug issues related to server-side processing such as - form not sending email, record not inserting or updating, query not showing data etc. The first thing you need to do is to open the server connect settings. They are located in the Workflows Panel > Server Actions: [Screenshot 2021-09-27 at 10.02.35] And enable the Debug Mode: [Screenshot 2021-09-27 at 10.03.08] Click Save: [Screenshot 2021-09-27 at 10.03.26] In your browser, open the Developer tools. If you don’t k…

[Engel]

Yes, thats the debugging guidance I studied. To your question: Nothing, see here:

[Teodor]

Then there’s something with your form code. Please post your form code here.

[Engel]

<div class="modal fade" id="modalLoginRegister" is="dmx-bs5-modal" tabindex="-1" dmx-on:hide-bs-modal="frmRegister.reset()">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col">
                                <ul class="nav nav-pills nav-justified" id="navTabs1_tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true">Login</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="navTabs1_2_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_2" role="tab" aria-controls="navTabs1_2" aria-selected="false">Register</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="navTabs1_content">
                                    <div class="tab-pane fade show active" id="navTabs1_1" role="tabpanel">
                                        <p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
                                    </div>
                                    <div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
                                        <div class="container-fluid">
                                            <form id="frmRegister" method="post" is="dmx-serverconnect-form" action="/api/security/user_registration" dmx-on:success="notifies1.success('Registrierung erfolgreich. Du bist jetzt eingelogge.d ');modalLoginRegister.hide()">
                                                <div class="row justify-content-center">
                                                    <div class="col">
                                                        <div class="row">
                                                            <div class="col text-center">
                                                                <h1>Register</h1>
                                                                <p class="text-h3">Enter your registration details below.</p>
                                                            </div>
                                                        </div>
                                                        <div class="row align-items-center">
                                                            <div class="col mt-4">
                                                                <input type="text" id="inp_firstname" name="firstname" class="form-control" placeholder="Vorname" required="">
                                                            </div>
                                                            <div class="col mt-4">
                                                                <input type="text" id="inp_lastname" name="lastname" class="form-control" placeholder="Nachname" required="">
                                                            </div>
                                                        </div>
                                                        <div class="row align-items-center mt-4">
                                                            <div class="col">
                                                                <input type="email" id="inp_email" name="email" class="form-control" placeholder="Email" required="">
                                                            </div>
                                                        </div>
                                                        <div class="row align-items-center mt-4">
                                                            <div class="col">
                                                                <input type="password" id="inp_password" name="password" class="form-control" placeholder="Passwort" required="">
                                                            </div>
                                                            <div class="col">
                                                                <input type="password" id="inp_password2" name="password2" class="form-control" placeholder="Passwort wiederholen" required="" data-rule-equalto="password">
                                                            </div>
                                                        </div>
                                                        <div class="row justify-content-start mt-4">
                                                            <div class="col">
                                                                <div class="form-check">
                                                                    <label class="form-check-label">
                                                                        <input type="checkbox" class="form-check-input" required="">
                                                                        I Read and Accept <a href="#">Terms and Conditions</a>
                                                                    </label>
                                                                </div>
                                                                <button id="btnCancelRegister" class="btn btn-secondary mt-4" dmx-on:click="modalLoginRegister.hide()">Cancel</button>
                                                                <button id="frmRegister" class="btn mt-4 btn-primary" dmx-on:click="modalLoginRegister.hide()">Register</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

[Engel]

I believe it is something much more basic that makes that the files in interaction are not working anymore.

[Teodor]

The problem here is that your button is not type submit:

<button id="frmRegister" class="btn mt-4 btn-primary" dmx-on:click="modalLoginRegister.hide()">Register</button>

You should use a submit button when submitting a form. So select the button and change its type to submit in the properties inspector.
Also, the modal hide event should not be applied there. It must be applied on the form - On Success > Hide modal, not on this register button. The register button should only be used to submit the form.

[Engel]

Thanks Teodor. I didnt get it to work but still thanks for your help. I will go back and dig into the basics again.

I hope I will get Wappler a working tool for me one day!

Thanks again -
Thomas

[Teodor]

So what is the issue now after you changed the button type?