How to modify page variable through Javascript?

Wappler General How To
#1

Hi,

I have the following variable:

<dmx-value id="pageLoaded" dmx-bind:value="0"></dmx-value>

I need to set that to 1 from Javascript code, such as:

<script>
// Do something here
pageLoaded = 1;
</script>

I’ve tried doing stuff like:

dmx.parse('pageLoaded')
dmx.parse('pageLoaded.value')

But it doesn’t give me the contents of the variable, it returns undefined

What am I missing?

How to Store Global Variable into Wappler Variable
#2

You can get at any dmx data via dmx.app.data:

dmx.app.data.pageLoaded.value

You might also need to include content before anything if the item is in a content page, rather than layout. This might actually be why your parse doesn’t work (you can use either).

#3

You can also use global variables like:

dmx.global is the global data scope, data that you set here can be accessed from anywhere.

dmx.global.set(<name>, <value>) sets a value.

dmx.global.get(<name>) gets a value.

dmx.global.del(<name>) deletes a value.

#4

This is weird, dmx.app.data only contains variables that are defined in the main layout, not in the content page

I think I’m not following :frowning: Thanks for your insights though! (edit: just understood it)

I got it working, turns out content variables are in dmx.app.data.content. It’s not possible to edit this directly though (else it’ll break stuff), one needs to use dmx.app.set('pageLoaded', 1)

Thanks Teodor as well for the dmx.global thingy :slight_smile:

#5

Actually, it’s kind of a broken mess. It only works if I do:
(from 1 to 0)

dmx.app.data.content.pageLoaded = 0; // this line alone doesn't trigger view changes
dmx.app.set('pageLoaded', 0); // triggers view changes, only if line before was executed

How am I supposed to edit this variable?

Edit: How to access dmx.app.data.content.pageLoaded using dmx.app.get?

#6

Maybe if we go a few steps back we can figure this out in case we have an XY problem here.

What are you trying to achieve in the bigger picture? Why are you trying to modify the dmx structure outside of App Connect framework?

Maybe the solution is modifying it from within AC.

#7 
<div id="mydiv" class="row" dmx-show="pageLoaded.value==1">

I want to show this <div> once a certain Javascript code (unrelated to Wappler) executes succesfully, at which point I want to make pageLoaded.value = 1.

For testing purposes, this variable is set to 1 by default:

<dmx-value id="pageLoaded" dmx-bind:value="1"></dmx-value>

The aim is to make it hide by doing pageLoaded.value = 0

If I do this:

dmx.app.data.content.pageLoaded = 0;

The div was supposed to hide, but that doesn’t happen, unless I execute the following line after:

dmx.app.set('pageLoaded', 0);

But this ‘pageLoaded’ variable didn’t seem to exist, because dmx.app.get returned undefined before the set. So, the dmx.app.set is there just to refresh the view (i.e.: make dmx-show update), which looks like a bit ugly solution

#8

How about:
dmx.parse("pageLoaded.setValue(0)")

or is the AC variable is on a content page:

dmx.parse("content.pageLoaded.setValue(0)")

1 Like
Help with Sortable JS - Kanban
#9

:smile:

Thanks everyone!

#10

If possible refactor your JS code into an AC component so you don’t have to deal with these things which can over-complicate over time when you need to make sure that AC library is initialised before calling certain functions.

For example in my i18next AC component I have to avoid some flickering of the strings while being translated so I hide the body until the i18next component is initialized.

i18next.on('initialized', function (options) {
            dmx.requestUpdate()
            this.dispatchEvent('init')
            this.set("init", true)
            // We overwrite the formatter as the library has been initialized.
            dmx.Formatter('string', 't', function (key, options) {
                console.log("Translated: " + key)
                return i18next.t(key, options)
            });
        }.bind(this));

Then I just check the variable init I just set for my i18next component to show the body.

<body is="dmx-app" id="main" class="bg-white" dmx-show="i18next.init">

<dmx-jonl_i18n id="i18next"...></dmx-jonl_i18n>

Wappler 27-07-2022 20.01.26 000021

#11

Thanks - this goes a little bit over my head at this time but I’ll certainly revisit if things get more complicated :wink:

Currently, I call this non-Wappler JavaScript code after a Server Connect success call (using the “Run Javascript” flow step)

1 Like