Set value to variable by javascript

Wappler General Need Help
1

Hello,

I am facing something strange…

My project is with NodeJS

  1. A single page with a variable “var1” (dafault = Hello World).
  2. A title showing the value of “var1.value” on the page.
  3. A button, when clicking, I execute a javascript function (setTitle) that is at the bottom of the page.

This approach doesn’t work, am I missing something?


function setTitle() {
    dmx.app.set('var1', 'OTHER TITLE');
}

And it gets even more complicated, when I have a page using a layout, in this case, the layout has an area where the pages are injected, like this.


    <%- await include(content, locals); %>

In this case, it creates an extra level inside “dmx.app.data”, so how do I define the value of a variable that is on my internal page? I tried that, but it also doesn’t work.


function setTitle() {
    dmx.app.set('content.var1', 'OTHER TITLE');
}
2

Hey,

So if i am understanding correctly, there’s a couple of things i would mention that might help.

When using dmx.app.set it doesn’t set the value of a variable that you’ve created in the Wappler UI. i.e. <dmx-value id="var_myValue" dmx-bind:value="test"></dmx-value>

Instead it would create a variable and set a value that you can use if you hand code it, but in your example above, var1 ' OTHER TITLE' would not be selected able in the UI.

If you want to change or set the value of a Wappler variable, instead use dmx.parse like this:

function () {
dmx.parse("var_myVariable.setValue('My Title')");
}

Hope this helps somewhat.

1 Like
3

Wow Philip,

You were perfect in the explanation and accurate in the answer :slight_smile:

Thank you very very much!

1 Like
4

No worries. Been there myself so I’m happy to pass the information back on :slight_smile:

1 Like
5

@Philip_J Sorry for bumping up this pretty much old topic but may I ask your assistance here.
As a proof of concept I have pretty much basic setup: Variable (var1), Header which has var1.value as text, a simple java script code to change var1 value.
Unfortunately code bellow won’t work and no errors in console.
Could you please guide - what I’m doing wrong?

Thank you in advance.

<dmx-value id="var1"></dmx-value>
<script>
    function set() {
        dmx.parse("var1.setValue('My Title')");
    }
</script>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>{{var1.value}}</h1>
            <button onclick="set();">click here </button>
        </div>
    </div>
</div>
6

Should actually be:

dmx.parse("content.var1.setValue('My Title')");

The variable is in the "content" view, so it needs to be explicitly set when using javascript.

2 Likes
7

@mebeingken Thank you so much! Worked like a charm!

8

If you want to check the path to data on a page. Open the page in your browser, go to console in dev tools of the browser and type dmx.app.data and hit enter. You can see the complete structure for components on your page - I use it all the time!

10

Thanks! Indeed that’s a great advice!

1 Like