Action Scheduler with Server Connect and Flow to Javascript to Update element.innerHTML

I’m struggling with what would seem to be a very simple task.

  1. Run Action Scheduler 3 seconds after page load (works)
  2. Action Scheduler step 1: Server Connect to Server Function pulling API data (works)
  3. Action Scheduler step 2: Flow -> Run Javascript, passing one variable to a function (??? odd behaviour)

In the function handler of the AS, I’m setting two variables, one manually (the number 0), and one from the SC function.

The function then takes that second variable and sets an existing page element’s innerHTML as the contents of that variable.


However, what is received by my function is simply the name of the variable, and not the value.

I can type dxm.parse(name) into the browser dev console and get the expected value, but I can’t seem to get the expected value exposed in the javascript. (expecting 1 for class_0, and 0 for class_1)


What am I missing here? Why can’t I parse to the value, or simply pass the value to the javascript.

FYI, if there is an easier way to bind to the Badge value of a Button, I’m all ears!

Hi,

The flow steps run synchronously, but do not wait for the server connect call to complete.
So after your first step, second step run immediately, irrespective of weather you have received a response from the first call.
What you need to do is put the JS calling Flow in the dynamic success event of the server connect. Then it should work reliably for you.

As for setting the ‘BADGE’ value, it should be pretty straight-forward with dmx-html or dmx-bind:value. No need for flows or JS.
If you can share your HTML, I might be able to help better.

1 Like

Thanks Sid,

I moved the JS to the success, and it works the same (fills the variable instead of the value) in the browser, but it actually populates the value in the wappler app. But I am interested in what you’re thoughts are on using the dmx-bind:value.

This is my button’s html:

<button id="notification_button_class_0" class="btn bg-primary text-primary style30" style="background-color: rgba(0,0,0,0.45) !important;">General&nbsp;<span class="badge badge-primary"  id="notification_badge_class_0">#</span></button>

It’s the “#” is what I want to change.

Thank you very much Sid,

I got it to work with this:

dmx-text=“serverconnect1.data.tt_notifications_counts.data.data.travtrax_notifications_count_classification[0].data.class_0”

1 Like

That’s great.
Another way you can bind this is:

<button id="notification_button_class_0" class="btn bg-primary text-primary style30" style="background-color: rgba(0,0,0,0.45) !important;">General&nbsp;<span class="badge badge-primary"  id="notification_badge_class_0">{{serverconnect1.data.tt_notifications_counts.data.data.travtrax_notifications_count_classification[0].data.class_0}}</span></button>

There is no difference as such in both cases, just two ways of doing it.

2 Likes