Wappler Version : last stable
Operating System : Mac
Server Model: NodeJS
Database Type: PostgreSQL
Hosting Type: local Wappler
Something happened to the Modal element. Errors are not displayed in the expressions interface (there is only a close button) and the editor itself does not open either. That is, it is completely impossible to do anything with him.
Are you sure App Connect is added on your page?
Why isn’t it added automatically now? How can this be checked?
I can’t answer this question.
It’s added automatically when you create a page.
I’m just asking if the App Connect framework is added on your page or not.
If it’s missing just add it from the frameworks menu in the App Connect panel.
So is it actually added on the main/layout page?
Do you see this error in Wappler only or also in the browser?
AppConnect is on all pages. Error only in Wappler, but I can't test modal in browser, because I can't set it to show in any expression.
My question is, on the main page - check in code view. Do you see the app connect js include or not?
Also do you see the is=“… attribute on the body or html tags?
Or maybe there’s a code/syntax error on the page. Please provide a link to your page or paste your page code.
Why do you have Bootstrap 4 and Bootstrap 5 includes on your page?
You can’t and you should not mix Bootstrap 4 and 5 on the same page.
You should either use Bootstrap 4 or Bootstrap 5.
I probably tried to replace 4 with 5 in the project properties, what is the best thing to do now - delete the lines in Main with version 4 or with version 5?
This is what the links for Bootstrap 5 should look like:
<!doctype html>
<html lang="ru">
<head>
<base href="/">
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Arkadia ERP</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.2/css/all.css" integrity="sha384-PPIZEGYM1v8zp5Py7UjFb79S58UeqCL9pYVnVPURKEqvioPROaVAJKKLzvH2rDnI" 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="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
<script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
<script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
<script src="/dmxAppConnect/dmxMasonry/dmxMasonry.js" defer></script>
<script src="/dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
</head>
<body is="dmx-app" id="main">
<main>
<div is="dmx-view" id="content">
<%- await include(content, locals); %>
</div>
</main>
<script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Having said that, I have shown the latest version of Font-Awesome icons and removed the Bootstrap icons. This is your choice to use either. But do not use both to eliminate confusion.
Ben, thank you very much for your help - I pasted your code and removed everything unnecessary about version 4 and everything worked 
I will try not to change frameworks during the project - this was not a very good idea.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.