NodeJS Adding Dynamic Modals

Wappler General Need Help
1

Being new to NodeJS, and really wanting to build using its features. However, making the transition from PHP to Node is proving to be quite a challenge.

The basic structure is not too difficult. However, adding some common components that we used with PHP are no presenting new challenges. For instance, the ease of inserting a dynamic modal and its triggering method. This has proven to be pretty challenging. I’m sure the methods of using these components with PHP have clouded my mind.

For instance while following a NodeJS and SQLite tutorial, I thought I would add a modal to use as an update form. At first I tried to place a dmx-on:click within the data table row (). However the method of doing this with in a PHP doc has proved to be quite different. I’ve tried everything I know. No success. Then I tried to add a button at the end of table item row (). Still, no success.

Viewing Root (main.ejs) in the Browser

Screen Shot 2022-02-10 at 11.41.36 AM
Screen Shot 2022-02-10 at 11.41.36 AM1280×888 274 KB

Within Wappler Viewing the Index.ejs File

Screen Shot 2022-02-10 at 11.51.30 AM
Screen Shot 2022-02-10 at 11.51.30 AM1280×784 211 KB

Any help explaining this process will be very appreciated.

2

Hello,

Adding components on the page has nothing to do with the server model selected. Nothing is different when adding a dynamic modal on PHP, NodeJS or .NET, or plain HTML page.

The errors in the browser tell you that some files are missing - some bootstrap css/js files and some components css/js.
Are you sure they are on the server? Are you sure you have saved your layout page?
How does your layout page head tags look?

3

Yes, as far as I know the files are all local.

<head>
    <base href="/">
    <script src="/dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>NodeJS Tutorial</title>

    <script src="/js/jquery-3.5.1.slim.min.js"></script>
    <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="/fontawesome5/css/all.min.css" />
    <link rel="stylesheet" href="/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js"></script>
    <script src="/dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js"></script>
</head>
4

So are the files from the error messages actually existing on your server?

5

I just checked the local folders and it appears that the bootstrap table generator files are missing for both version 4 and version 5.

When I just reselected the frameworks however, the app reports were all successfully installed. Yet, the bootstrap table generator files for both versions 4 and 5 fail to install.

6

Is your content page attached to the layout page you pasted the code from?
Are you sure you have saved your layout page after adding the components on the content page?

7

Yes.

8

I found the main file that was missing: “/bootstrap/5/js/bootstrap.bundle.min.js”
This fixed it.
I’m not sure why it wasn’t being loaded into the head. I had to load it manually.

9

Screen Shot 2022-02-10 at 1.00.15 PM
Screen Shot 2022-02-10 at 1.00.15 PM2820×1888 434 KB

10

Because probably you did not save the layout page after adding the components on the content page.

.map files errors can be ignored. These files are only for our own debugging purposes.

11

I will be careful to save the layout page of the project each time a change is made. :wink:

1 Like