Pass a client side Javascript to an HTML Element Dynamically

Discussion Ask a question
,
1

OK - So first off i’m a noob to wix. So please be gentle.

Here is what I am trying to do. I own a food truck / Food delivery service. I want to post nutritional data for my dishes on my website. I use a database food analysis service - recipal.com. They make FDA compliant labels available dynamically with a js embed code.

I have created a collection on my site with the links to the recipal data and the dishes. I am trying to send the js to the HTML element dynamically. The user will select a dish from a drop down box - and the label will be displayed.

On the On_Change event in the drop down I have this code:

export function dropdown1_change(event) {
 //Add your code for this event here:
wixData.query('MenuItems') 
  .contains('recipe__name', $w('#dropdown1').value)
  .find()  // Run the query
  .then(res => {    
 let DataRow = res.items;  
 let strURL = "<script src='https://www.recipal.com/recipes/" + res.items[0].recipe__embed_token + "/embed.js' type='text/javascript'></script>"; 
     $w("#html3").postMessage(strURL);
  });

This code takes the dish name, and queries the value of the embed token from recipal and builds the src value of the src tag in the js.

In the HTML element I have this code:

<html>
  <head>
    <style>
      .button {
        background-color: #155DE9;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        font-family: 'Arial';
      }
      .label {
        font-family: 'Arial';
      }
      .input {
        font-size: 14px;
      }
    </style>
    
    <script type="text/javascript">
      // when a message is received from the page code
      window.onmessage = (event) => {
        if (event.data) {
          document.getElementById("theLabel").innerHTML = event.data;
console.log(event.data);
$.getScript(event.data);
        }
      };

      // send message to the page code
      function button_click() {
        window.parent.postMessage(document.getElementById("theMessage").value, "*");
      }
    </script>
  </head>

  <body>
    <span id="theLabel" class="label"></span>
  </body>
</html>

Right now, this code just prints the link in the HTML. I was doing that to verify that data was being received. It is.

What I tried previously was passing the entire js I need ( )

It seems like Wix is stripping tags when I send them - that never worked. I have also tried embedding something to try and build a ne js inside the message receive js, and that hasn’t worked.

Can anyone help me out with this?

2

Hi Robert,

I suspect that by using “$.getScript” you are encountering a security constraint that prevents that script from writing to the document.

Try loading the script by writing the script tag to the document yourself.
In the HTML Component’s “onmessage” handler, try doing this:

document.write(event.data)

Good luck!

3

Thanks. I had tried something like that originally - and it works, until the user selects a different item from the dropo down. At that point, the HTML is locked in and I couldn’t find a way to force the HTML element to regenerate back to its initial state. So for example, the user comes in and selects the Bananas Foster Cheesecake from the drop down, then decides to select the Brownie. At that point it still displayes the label for the cheesecake.

Is there a way I can force the HTML to regenerate before sending the string?

I have tried using the inner HTML to change the content as well. This is what the HTML code looks like when trying that:

Select a Menu Item at the left to see the nutrition info

4

Yes, that embedded script overrides the entire frame code.

A way to solve this is having an “iframe” hosted inside the HTML component (which is an “iframe” in itself). That way you can replace the content of the inner iframe while keeping the script that’s listening for changes.

Try something like this (where “theFrame” is the ID of the iframe element you put in the body of your HTML component):

document.getElementById("theFrame").srcdoc = event.data;
5

That didn’'t work either. It seems like when I try any method on document other than document.write, I get no results. I have even tried deleteing and recreating an HTML element - so that I delete a paragraph and recreate the same paragraph every time through the loop.

6

I did a little test, and the approach I outlined above did work, so you probably need to debug a little to see what doesn’t work for you.

For your reference, the content of the “body” of the HTML I used is:

<body>
    <iframe id="theFrame" width="100%" height="100%" style="border:none;"/>
</body>

If you still don’t manage to get it working you can try posting a link to your site/editor so we could take a look.

Good luck