Dmx.app.set not updating conditions

Wappler General Need Help
,
1

Hi,

When I set a global variable via JavaScript using the dmx.app.set or dmx.global.set it's not always updating that value on the page.

For example:

I have a element with the following attribute dmx-class:color-red="var==1".
When I click a button on the page it runs a JavaScript function that calls dmx.app.set('var', 1).
And another button that calls a JavaScript function that calls dmx.app.set('var', 0).

Now the element with the color-red class only updates half of the time.

I used to call the dmx.requestUpdate() function but since that is deprecated my function does not work anymore and i can't find another way to make this update the element every time.

Does anyone have a solution for this?
Thanks!

2

If I've correctly understood what you're trying to do, I think you need to replace the dmx.app.set statements in your JavaScript with:

dmx.parse(“content.var.setValue(0)”)

dmx.parse(“content.var.setValue(1)”)

Use dmx.app.data in the console to check the correct path for "content.var"

3

That's not exacly what I'm trying to do.
I want to set a global variable in dmx.
When logging the variable in the console like below, you see it sets the value to 1. It just does not update the element that has a condition for that variable.

image

This used to work before but that was while using the dmx.requestUpdate function.

4

dmx.app.set and dmx.global.set are indeed the correct way to set global variables and with App Connect 2 you should not need the dmx.requestUpdate function. The expressions should auto update when some data value changes.

It would be fine if you can reproduce it in a simple example page and post that here for us to test.

5

Ah - sorry I misunderstood. I tested it quickly and it worked perfectly with dmx.app.set and the class updates automatically every time.

As Patrick suggested, I would reproduce it on a simple page or share more of the code if you can. If the variable is being updated correctly, it suggests the error is elsewhere.

What do you mean when you say it updates 'half the time'? The things that spring to mind to check would be:

  • is the CSS definitely loading and correct?
  • 'var' is a common default name so is there perhaps a conflicting local variable?

Sorry if those are obvious but your code looks correct and the variable is updating so the JS is running OK. Without wider context and seeing the actual page it's not really possible to see what's going wrong

6

I was trying to repreduce the problem in a new environment and just setting the global variable works like expected as you can see below.

The code i used:

  <div class="d-flex g-24 p-12-24">
    <button class="btn prim-btn" dmx-on:click="run({runJS:{outputType:'text',function:'setGlobal',args:['variable', 1]}})">red</button>
    <button class="btn prim-btn" dmx-on:click="run({runJS:{outputType:'text',function:'setGlobal',args:['variable', 0]}})">white</button>
    <div class="box p-24" dmx-class:bg-red="variable==1"></div>
  </div>

  <script>
    function setGlobal(variable, value) {
      dmx.app.set(variable, value);
    }
  </script>

But what I was originaly doing was toggling an array of selected id's by first retrieving the array with dmx.app.get(variable) and adding/removing the id of the element clicked.
After adding/removing i use dmx.app.set(variable, updatedArray) to set the updated variable but now it's not updating.
Video refrence + code below:

<div class="d-flex g-24 p-12-24">
    <button class="btn prim-btn" dmx-class:red="variable.contains($index)" dmx-repeat="4" dmx-on:click="run({runJS:{outputType:'text',function:'bulkArray',args:[`$index`,'variable']}})">{{$index}}</button>
  </div>

  <script>
    function bulkArray(id, arr) {
      let currentArray = dmx.app.get(arr);
      if (currentArray == undefined) currentArray = [];
      if (currentArray.includes(id)) currentArray = currentArray.filter(item => item !== id);
      else currentArray.push(id);
      dmx.app.set(arr, currentArray);
      console.log(currentArray)
      console.log(dmx.app.get(arr))
    }
  </script>

When logging the array at the end of the function both currentArray and dmx.app.get(arr) get the expected value but it's not updating on the page.

7

OK - this is a very stupid fix but it works. I noticed the page updates only when an element is removed from the array. When you add to the array nothing happens (other than the initial item).

So I tried the following - adding 'a' and removing it every time you add the index value.

function bulkArray(id,arr) {
let currentArray = dmx.app.get(arr);
if (currentArray == undefined) currentArray = ;
if (currentArray.includes(id)) {
currentArray = currentArray.filter(item => item !== id);
} else {
currentArray.push(id);
currentArray.push('a');
currentArray = currentArray.filter(item => item !== 'a');
}
dmx.app.set(arr, currentArray);
console.log(currentArray);
console.log(dmx.app.get(arr));
}

I think perhaps a bug as I can't see anything else to explain the behaviour

1 Like
8

Thanks! That works for now.

I hope this will get fixed in the future since this is an ugly solution.

9

Thank you for pointing me to this thread.It solves the issue. In my case i have to add some dummy data to the array and then call dmx.app.set('arr',myArray) it doesnt work if i remove the dummy data before calling dmx.app.set('arr',myArray). I guess will have to handle not showing these items