Controls not executing code on linked HTML elements

WEB TMS Web Core VSC
1

I'm experiencing a problem where the web controls are not executing code after the ElementID has been linked to the necessary HTML elements. This issue is only manifesting when trying to use a ready-made responsive template which I bought from the company called "Creative Tim". When using the controls directly without linking them to an HTML element via the ElementID tag, the code executes as expected when clicking on the controls.

Here is an example of an HTML element as provided by the template, to which I've added an id tag edtEmail, linking it to the control's ElementID:

<div class="mb-3">
  <input type="email" class="form-control" placeholder="Email" aria-label="Email" id="edtEmail">
</div>

The control used to link to the ElementID via the id tag edtEmail, is a TWebEdit component. When adding code on any one of the events, nothing executes. After linking the ElementID to the TWebEdit component, the bootstrap button becomes clickable in the IDE, but no code is executed when running the application in the browser.

Here is another example of a bootstrap button giving the same issue:

<div class="text-center">
  <button type="button" class="btn btn-primary w-100 my-4 mb-2" id="btnSignIn">Sign in</button>
</div>

After linking the ElementID of the TWebButton component to the id tag btnSignIn, the bootstrap button becomes clickable in the IDE at design time, indicating a successful linkage, but no code is executed on any of the TWebButton events.

The approach in getting code to execute behind the controls is pretty straightforward by itself, but for some reason, I cannot see why this is not working on any one of the HTML elements as supplied by the template after linking their appropriate controls via their id tags.

Any help regarding the reason for this type of behaviour would be appreciated.

Thank you.

2

Did you inspect the browser console for possible error messages?

3

Yes, I did. There seem to be no issues. Here is a screen-shot of the Chrome console.

Browder-Console
Browder-Console987×276 5.03 KB

No HTML element with the relevant linked web control is responding to any code behind the events, and no breakpoint is triggered either.

4

I suggest to isolate this and send a sample source project with which we can reproduce this and investigate as otherwise, it is guesswork what is happening in your project.

5

Here is a zip file with the source code and all the necessary assets:

Project Sample

6

Your project is wrong.
You set the startup HTML to be login.html but from there the app code is not starting.
You need to set the startup HTML to be postman.html.

7

Silly mistake. Thanks for pointing that out. I didn't even think to look at the project file.

How do I get the "login.html" file to appear when I launch the project? When the startup HTML is set to "Postman.html", even though the login form is created in the project file startup, only a blank screen appears in the browser when loading the initial startup file "Postman.html"?

How do I get the "login.html" file to load and display on program startup after the file "Postman.html" has been loaded? Since the "login.html" file is the first and only form to load in the project startup, is it not supposed to display by default the only Pascal form file which is the "login.html" file, as the file "Postman.html" is only the project file and not an existing Pascal form file?

Basically, my question is this: When launching the application, how do I load the file "login.html", but the browser address still displays "http://localhost:8080/Postman" after specifying the HTML startup file as "Postman.html"?

8

This template contained script that overwrote the DOM.
So, I had to clean it up.
Postman.zip (16.2 KB)