(Unsolved)How to change HTML code from page code?

Ask the community
,
1

So I have a dynamic page, and I would like to show custom google calendar on my dynamic pages.

I heard that there is one way to achieve this: https://support.wix.com/en/article/corvid-working-with-the-html-element#sending-a-message-from-page-code-to-an-html-element

".postMessage"

I don’t know how to make it work…

My code right now:

//Html code
<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
       let receivedData = event.data;
    }
  };
  
  //...
  
</script>

//Page code
export function test_click() {
 // send message to the HTML element
  $w("#html6").postMessage($w('#dynamicDataset').getCurrentItem().kalenteri);
}

“kalenteri” being the title of row of html codes.

All I want is that the code from #dynamicDataset replaces the code that is in the html.

Pic of this:

Thanks in advance!
-Alvar

2

Alvar, in order to help you, we need a bit more info about what exactly you are sending to the html-component with the var kalenteri. Is that a URL of a published Calendar or something else?

3

It is a html code. Like the one seen below:

<iframe src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23039BE5&amp;ctz=Europe%2FHelsinki&amp;src=b25rN2YycW41NHYwdHVnM2VzcGdncG8zdThAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23001dc2" style="border:solid 1px #777" width="800" height="600" frameborder="0" scrolling="no"></iframe>

And its important that I can change it via code, as it will be on dynamic pages.

And also it cannot be the link, as it can’t be modified (colors, preferences… etc.)

4

There is no API that you can use to set the contents of an HtmlComponent. However, you can write your script in the HtmlComponent, which can accept a message from the page with new content to embed within the current HTML code in the HtmlComponent. This isn’t exactly a trivial task, but it can be done.

5

Alright so if the only field I want to change in the html code is the “scr=xxxxxxxxxxxx” it can be done?

<iframe src="https://calendar.google.com/calendar/embed?height=474&amp;wkst=1&amp;bgcolor=%23f6f6f6&amp;ctz=Europe%2FHelsinki&amp;src=b25rN2YycW41NHYwdHVnM2VzcGdncG8zdThAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23001dc2&amp;showTz=0&amp;showCalendars=0&amp;showTabs=0&amp;showPrint=0&amp;showTitle=0&amp;showNav=1&amp;showDate=1" style="border-width:0" width="563" height="474" frameborder="0" scrolling="no"></iframe>

That orange=red field should be changed from code. NOTE: the green one is not part of the field. It doesn’t change when i change the calendar.

Is this possible, and how if so?

6

Refer to the article Working with the HTML Component in Corvid to see how to pass messages to (and from) the HtmlComponent. You can pass a new src parameter using a message and then embed it in the script.

7

Here is how Im trying to do it:

export function test_click () {
// send message to the HTML element
$w ( “#html6” ). postMessage ( $w(‘#dynamicDataset’).getCurrentItem().kalenteri );
}

But despite the article I don’t understand how the iframe src could use data from my page code as a parameter.

This is a code from the article:


<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
       let receivedData = event.data;
    }
  };

//the other script in html component:

Thanks for all help!

8

See these examples to see how messages are passed to an HTML script in the HtmlComponent:

Chart
Use JavaScript post messages to communicate with the HTML component . In this example, learn how to embed a chart on a page.

Multiple Markers in Google Maps
Embed Google Map on your site with multiple location markers , marker clustering, and custom controls using the HTML component.

9

@yisrael-wix Thanks a lot! I will try this.

10

@yisrael-wix

I can technically get the info to the html as shown in the video:

html code:

<html>
  <head>
    <script type="text/javascript">
      // when a message is received from the page code
      window.onmessage = (event) => {
        if (event.data) {
          document.getElementById("code").innerHTML = event.data;
        }
      };
    </script>
  </head>
  
  <body>
    <span id="code" class="label">Code comes here</span>
    <br/><br/>
  </body>
</html>

But I Don’t know how to use it inside this

11

You will need to figure out how to combine the two pieces of code - your’s and the onmessage() to have a working script that can “modify itself”.

We are unable to provide full code solutions. Wix provides many resources to help users learn how to get the most out of Corvid. We encourage users to take advantage of these resources which include video tutorials, full app examples (which can be loaded into the user’s editor), API documentation, and a wealth of articles describing a wide range of topics - from beginner to advance.

You may want to check out the Wix Marketplace - it’s a hub where you can look for Corvid (and other) experts for hire.

12

Look at a (very old) solution for more or less the same problem (with Google Sheets) I published. It more or less has got all the code you need: https://girizano.wixsite.com/codecorner/post/html-component-not-running-in-publish-mode-google-sheets-example

13

Hello, I would like to remove my Paypalbutton from the shoppingcart. What should I do?