Serverconnect's done event to call Javascript Function Error

Wappler General Need Help
1

I'm using advice from @patrick on how to call a javacript function at the completion of a serverconnect but I'm unsuccessful. I'm just trying to learn this so keeping things simple.

My serverconnect is:

<dmx-serverconnect id="scgetDashboardHistoryWeekly" url="/api/utils/dashboardWeeklyHistory" dmx-on:done="myFunction()" dmx-param:asset_type="'video'"></dmx-serverconnect>

And the test script in my page is:

<script>
	function myFunction() { 
            console.log("ServerConnect has finished loading!");
            //console.log("Received data:", data);
        }
</script>

But the error I'm seeing in dev tools is:

parser.js:676 Method "myFunction" not found in expression: myFunction()

What's wrong with what I have?

2

dmx-on:done="" means you are calling a dynamic event - i.e. you run/control an app connect component.

for calling js functions you need to use the static events, so: ondonde="myFunction()"

1 Like
3

I'm able to correctly call myFunction() now using a static event. My next issue is that 'testValue' is undefined in the console output. It has a value of 3, which I confirmed. Did I not use dmx.parse() correctly?

function myFunction() {
         console.log("ServerConnect has finished loading!");
         // Access specific properties, log it for the purpose to test connectivity
		 const testValue = dmx.parse('scgetDashboardHistoryWeekly.data.queryWeeklyHistory[0].upload_count');
        console.log("Upload_count:", testValue);
	}
4

are you sure the expression scgetDashboardHistoryWeekly.data.queryWeeklyHistory[0].upload_count is there when you call the function?

What happens if you enter this in the browser console and hit enter?

dmx.parse('scgetDashboardHistoryWeekly.data.queryWeeklyHistory[0].upload_count');
5

Static events was always a black-box for me.

  1. Can you elaborate usage/scenario of Static Event?
  2. I always thought that I have to use PageFlow in order to call/run JavaScript function.
6

Static events - calling js functions
Dynamic events - calling app connect components

It’s an option but it just makes it easier to use dynamic data for arguments for example, within the page flows compared to static events.

7

Thank you for detailed explanation.

8

I got an 'undefined' returned

> dmx.parse('scgetDashboardHistoryWeekly.data.queryWeeklyHistory[0].upload_count');
< undefined

So then I put the following two buttons on the page...

<button dmx-on:click="browserMain.alert(scgetDashboardHistoryWeekly.data.queryWeeklyHistory[0].upload_count)">Show Value</button>
<button onclick="console.log(dmx.parse('scgetDashboardHistoryWeekly.data.queryWeeklyHistory[0].upload_count'))">JS Console</button>

The button using dmx-on:click returned a value of 3.
The button using dmx.parse() returned undefined.

9

dmx.parse('content.....'); Using 'content' at the front is the key since my "page" is actually a content page on my Node platform.

Just came across that solution from a bug (not a bug) report: Dmx.parse() no longer working from a SPA (layout/content) webapp

1 Like
10

Oh, and typing dmx.app.data into the dev console....mind blowing!

11

Last question on this topic I believe...

How can I pass the result of my serverconnect to a javascript function using the static event ondone within the serverconnect itself?

I can now get the serverconnect object from within javascript, but can I pass the object to the javascript function?

I've tried a few different approaches with no success....

<dmx-serverconnect id="scgetDashboardHistoryWeekly" url="/api/utils/dashboardWeeklyHistory" dmx-param:asset_type="'video'" ondone="myFunction(content.scgetDashboardHistoryWeekly.data.queryWeeklyHistory[0].upload_count)"></dmx-serverconnect>

<script>
	function myFunction(data) {
         console.log("ServerConnect has finished loading!");
         console.log("Upload_count:", data);
	}
</script>
12

You would need to change that to use dmx.parse also here:

ondone="myFunction(dmx.parse(&quot;content.scgetDashboardHistoryWeekly.data.queryWeeklyHistory[0].upload_count&quot;))"

But i think this becomes to complicated to maintain. You can just create a page flow and define all the arguments there, calling it on dmx-on:done dynamic event - easier to maintain and read the code.

1 Like