How do I put a data binding where a string is expected?

[karh]

I need to put a data binding variable in an attribute.

The attribute is data-vimeo-id=" "

It’s expecting a number like: 12839238

This number is in a variable: {{get_lecture_video.data.get_lecture_video[0].lecture_vimeo_id}}

But I can’t put it in there, I guess I should be escaping it. But I’m not sure how…

Please help

Screenshot of what I mean:

[mebeingken]

You can convert any html attribute to dynamic data by adding the prefix:

dmx-bind:

So you will have:

<div id="video1" dmx-bind:data-vimeo-id="get_lecture_video.data.get_lecture_video[0].lecture_vimeo_id"> </div>

[karh]

@mebeingken Thank you so much, saved me a lot of frustration!

Now a new issue arose the ID needs to be loaded earlier apparently, as now the Vimeo SDK doesn’t see the ID.

Basically this is what happens:

Any idea on how to make the <script src=" https://player.vimeo.com/api/player.js"> load AFTER the data binding has loaded on the page?

[mebeingken]

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.

[karh]

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

[mebeingken]

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.

[karh]

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

[mebeingken]

@karh

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.

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.

[karh]

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?

[mebeingken]

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.

[karh]

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!!

[mebeingken]

@karh

Running it in console doesn’t seem to do much

You didn’t put () after the function name before hitting enter

[mebeingken]

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!

[karh]

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:

1. The ‘ready on’ doesn’t trigger (perhaps because of it being a SPA NodeJS page. I’ve posted a bug report for this. )

2. 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!

[s.alpaslan]

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.

[TwitchBlade]

@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

[mebeingken]

Nope, there is no limit. Not sure what is going on with yours, that code seems fine. Cache? Looking at the wrong target?

[TwitchBlade]

@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.

[TwitchBlade]

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.

[mebeingken]

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.