SC value to Javascript

Wappler General How To
#1

Hi,
I’m trying to bind a value from a Server Connect to a Javascript using dmx-parse but can’t succed.
I use this value to load an image using OpenSeadragon viewer.

<p>url_plan_camping : {{view.animate1.scGetPlan.data.queryGetPlan.url_plan_camping}}</p>
                       <script>
                           var imageUrl = dmx.parse('view.animate1.scGetPlan.data.queryGetPlan.url_plan_camping');
                           //var imageUrl = "https://giloo-camp-183.fra1.digitaloceanspaces.com/plan-camping_demo4452b0f4-a245-4fbf-ab5e-3ab8217960e8.jpg";
                           
                           // Récupère l'URL de l'image à partir de ta source de données
                           
                           console.log('imageUrl : '+imageUrl);
                           // Vérifie que la valeur de l'URL est correctement récupérée
                           
                           var viewer = OpenSeadragon({
                           id: "imageContainer",
                           prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/",
                           tileSources: {
                             type: "image",
                             url: imageUrl
                           }
                         });
                       </script>
<div id="imageContainer" style="width: 100%; height: 100%;"></div>

When trying to force the imageUrl value with the url this works perfectly.
Binding and displaying the value in the page works perfectly.
But I can’t set it dynamically.

There is something I’m missing with dmx.parse I guess…

Capture d’écran 2023-06-30 à 15.50.43
Capture d’écran 2023-06-30 à 15.50.433598×2090 546 KB

Thanks for your help.
Sylvain

#2

Your script is running in page load, before your server connect has run, thus no data is available. Turn your script into a function and run it on success of the server connect.

#3

How should I do?

#4

Start by searching the forum. For example, I searched JavaScript function and found this.

Keep searching and looking for examples you can copy for your specific need.

#5

Thanks.
I started with this before posting (just like i do everytime :slight_smile: )
I tried this simple example also without result… Even the console log is not displayed :thinking:

#6

To run a js function on server connect load/success you need:

  • a function, for examlpe:
function my_func() { console.log('server action loaded!')}
  • a server action which calls this function on success:
<dmx-serverconnect id="serverconnect1" url="/api/test" onsuccess="my_func()"></dmx-serverconnect>
1 Like
#7

Ok, I was missing the onsuccess="my_func()" part!
Many thanks.

#8

And that is the static events part. They are used to call js functions.
Screenshot 2023-06-30 at 17.37.02

#9

Many thanks!
This works perfectly.