Wappler Version : 4.9
Operating System : Windows 10
Server Model: NodeJS
Database Type: Postgres
Hosting Type: Docker
Expected behavior
What do you think should happen?
Using a custom JS file and script, you should be able to use dmx.parse to perform various functions:
i.e.
function runDMX() {
dmx.parse('var1.setValue(999)')
console.log('test complete')
}
Actual behavior
dmx.parse is not working. In the above example, the message is displayed in teh dev console, but the variable value is not updated.
This error occurred some time in the last week, but could have possibly happened with the previous 4.8.x update as i updated that a few days ago as well before updating to 4.9 just yesterday.
I have reproduced this in a brand new project using the 'Awesome App' starter template with Wappler.
Initially, testing this on the index.js file and setting up a custom js file with the function, dmx.parse did in fact work.
However, when creating a Layout and Content Page to simulate an SPA, the bug can easily be reproduced and dmx.parse does not work
How to reproduce
- Create new wappler project
- create a Main Layout page
- Create a content page with some dummy data
- create a variable on the content page and a way to display its value to test
- create a new JS file and create a simple function to change the value of the variable with dmx.parse
- run in the browser to test if works.
Here is the code from the pages i tested:
Main page
<!doctype html>
<html>
<head>
<base href="/">
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- New Wappler Page -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/bootstrap/4/css/bootstrap.min.css" />
<script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer=""></script>
<link rel="stylesheet" href="/css/style.css" />
<script src="/dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script type="text/javascript" src="/test.js"></script>
</head>
<body is="dmx-app" id="main">
<div is="dmx-view" id="content">
<section>
<div class="container">
<h1>Main Page</h1>
</div>
</section>
<%- await include(content, locals); %>
</div>
<script src="/bootstrap/4/js/popper.min.js"></script>
<script src="/bootstrap/4/js/bootstrap.min.js"></script>
</body>
</html>
Content Page:
<!-- Wappler include head-page="layouts/main" jquery_slim_33="cdn" fontawesome_4="cdn" bootstrap4="local" is="dmx-app" id="testPage" appConnect="local" -->
<meta name="ac:route" content="/testPage">
<div class="container wappler-block pt-5 pb-5">
<div class="row">
<div class="text-center col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<div class="d-block p-4 bg-light">
<h4 dmx-text="var1.value">Fancy display heading<br><small class="text-muted">With faded secondary text</small></h4>
<dmx-value id="var1" dmx-bind:value="0"></dmx-value>
<p>A nice paragraph</p>
<button class="btn btn-primary" dmx-on:click="run({runJS:{function:'runDMX'}})">Button</button>
</div>
</div>
</div>
</div>
JS file
// JavaScript Document
function runDMX() {
dmx.parse('var1.setValue(999)')
console.log('test complete')
}
