Haven’t worked with vimeo yet, but here’s a couple things to try:
Just tick the defer property of the script to have it load the src later.
If the var script is what triggers this, then you can wrap it in a function and call it after the page loads.
Tried the Defer: this still seems to load it too late as there’s still a blank.
Or perhaps I’m using the dmx-bind wrong, or my logic is wrong.
On the client side I can see the vimeo_id, but in the Sources panel of chrome devtools I just see the variables.
In the inspect panel I do see the appropriate id’s though:
Any thoughts?
Also I want to try your suggestion to wrap it in a function and call it after the page loads but I am not sure how, can you expand a bit 
It makes sense that your data-vimeo-id is not showing – you are not instructing it to do so. You have setup a custom data attribute, but that is not how you display something on the page – you’ll want to look at Dynamic Attributes and the Inner Text of a div to display it.
But since the value is there, I suspect it is just a timing issue. In other words, the value is evaluated after the vimeo script has run.
Try setting up a flow. That flow will call the javascript function you create. The flow can be triggered through a dynamic event on app load.
1 Like
Thanks for the quick replies.
As for the attribute, I’m following these instructions perhaps this makes more sense now?
I just tried the inner html Dynamic Attribute but I don’t think that I understand you correctly, this just displays the value on the page.
I’m going to attempt the flow now
Ya, I was only responding to the fact that you show " blank" in your screenshot when pointing to the div in your code – just letting you know that it won’t display without the inner text, not suggesting that displaying it will somehow fix this for you.
Got it! Appreciate it, helps my understanding.
As for the flow: this doesn’t seem to help. But highly likely I’ve not set it up properly, my first time using flows and wrapping things in functions.
Could you take a look please?
The flow needs to be triggered. On the App component, use a dynamic event on app ready, and run the flow.
You can also test the function in the developers console of your browser. On the console tab, just type the name of the function plus () and it will run the function. This is a good test because it removes the timing issue – good to know if the function is working on its own.
I had set up the flow trigger like this:
Correct?
Running it in console doesn’t seem to do much 
If you have any more tips they’re welcome, gonna head to bed here and try again tomorrow morning!
Thanks so far!!
You didn’t put () after the function name before hitting enter
I went ahead and built a POC:
Here is the entire contents of the <body> tag:
<script is="dmx-flow" id="flow1" type="text/dmx-flow">{
runJS: {
function: "loadVideo",
args: ["{{vimeo_id.value}}"]
}
}</script>
<dmx-value id="vimeo_id" dmx-bind:value="480055386"></dmx-value>
<div id="video1"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
function loadVideo(vimeo_id) {
var options01 = {
id: vimeo_id,
width: "900px"
};
var video01Player = new Vimeo.Player('video1', options01);
video01Player.setVolume(0);
video01Player.on('play', function() {
console.log('Played the first video');
});
}
</script>
<script src="bootstrap/4/js/popper.min.js"></script>
<script src="bootstrap/4/js/bootstrap.min.js"></script>
It consists of a variable – this holds the vimeo id. Using a var is just an easy way for me to provide a value from app connect–using other dynamic data will work as well.
There is a function loadVideo that takes one parameter, the vimeo_id.
There is a flow. When run it calls the javascript function and passes it the value from the var.
There is a trigger on app ready, that runs the flow.
On page load, the video comes up, ready to play!
1 Like
Thank you so much @mebeingken this is way beyond my expectations!
Very nice way to wake up 
Sadly, it doesn’t work for me.
Two issues:
-
The ‘ready on’ doesn’t trigger (perhaps because of it being a SPA NodeJS page. I’ve posted a bug report for this. )
-
Regardless of how I trigger it (I’m trying manually with a button first). Your code still doesn’t work with the variable from my Server Connect query
- I have removed what I had and copied your code in
- It works perfectly fine when I use a static value:
2020.12.03 11.35 - 1107 - Kitten
- The button does work when I replace the static value with my variable:
2020.12.03 11.37 - 1109 - Anchovy
But now, trying to trigger it automatically doesn’t work.
I’ve tried:
- Using the ‘auto run’ on the flow
- Using the ‘Done’ dynamic event on the Server Connect
The above things cause: player.js:2 Uncaught (in promise) Error: An id or url must be passed, either in an options object or as a data-vimeo-id or data-vimeo-url attribute.
But I got it working: by putting the a dynamic event on the server connect itself. So when it’s done it triggers the flow that you’ve created
However now I’m dealing with another issue that the server connect is triggering twice, but I got another thread about that
Many thanks, learned a lot from you!
create a function and call the function after server connect is loaded. In this way, the vimeo id will be available after the ID from server connect is ready.
@mebeingken this came in handy, however, are you only allowed to use dmx-bind: once per element? I am trying to add two custom data attributes to a button for use in a jQuery script and the first one renders as expected but the second doesn’t render at all.
The code:
Renders with only the data-contact-id attribute
Nope, there is no limit. Not sure what is going on with yours, that code seems fine. Cache? Looking at the wrong target?
@mebeingken thanks for the quick reply. I emptied the cache and it’s still the same. It’s the correct input because when I console.log each attribute’s value, the id value is correct and name is undefined.
I thought maybe it didn’t like “data-” in the attributes so I removed that, no difference. I tried to separate them with another by putting the dmx-on: code between them, still no go.
Kinda dead in the water without both attributes haha.
I created a sandbox page with just a server connect and a button…works fine. Try doing that, and if it works, you can find what is unique about your situation.
@mebeingken, thanks for taking the time to do that. I just figured it out. The query uses a table view I created and I forgot that in that view I used uppercase “C” and upper case “N” for concatenated name so it needs to be data-contact-name=“Contact_Name” instead of data-contact-name=“contact_name”.
I guess if the column doesn’t exists it doesn’t render any of the attribute. Would be nice if it rendered the attribute with some value like data-contact-name=“undefined” or some other warning.
It’s working now that I have the correct column name. That was driving me crazy haha.
Thanks again for your help.
1 Like
That’s strange…I actually tried to put in a bad column name thinking that might be the case, but I still saw the data attribute (albeit w/o the ="").
Oh well, you found it!
Could be because Wappler is confused. When I went to the query to verify the column name I got this.
The view indeed does exist and the contacts query works fine, I just can’t edit it.
Not expecting you to address this, just wanted to show you and maybe that is the difference as to why your attribute rendered empty and I got nothing at all when column name didn’t exist.
I’ll have to look into this in the bug forum as I updated to 3.7.8 today.