Problem with VELO postmessage

Ask the community
1

I have copied the VELO examples of postmessage into my project. I have changed names and I don’t see any errors in the VELO code or the HTML script. But, when I run the code nothing happens. I am trying to pass messages to imbedded HTML . I think I must be missing something - maybe an API or library? Can anyone help?

2

Are you using a

window.onmessage = (event) => { }

handler in your HTML Component?

3

You are talking about a code → which you do not provide → why?

4

basically I copied the code directly from the VELO examples - 2 different examples and neither one worked. I am missing something? I changed the names of some of the objects - but there are no errors showing in the velo code. I added the 3 imports at the top - thinking maybe I needed one of them (that wasn’t in the examples) - but it didn’t work either way. In the live velo code there are no errors.

Here is the velo code:

import wixData from “wix-data”;
import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’

$w.onReady(function () {
// when a message is received from the HTML element
$w(“#myHtmlElement”).onMessage( (event) => {
$w(“#text1”).text = event.data;
} );
} );

export function messageSendButton_onClick() {
// send message to the HTML element
$w(“#myHtmlElement”).postMessage($w(“#textInput1”).value);
}

Here is the HTML

.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; } Label

Send Message 

<script>
  let text = document.querySelector('#theLabel');
  let input = document.querySelector('#theMessage');
  let button = document.querySelector('button');
  
  button.addEventListener('click', event => {
    window.parent.postMessage(input.value, 'https://www.pgprovidercouncil.org')
  });
                          
  window.addEventListener('message', event => {
     text.innerText = event.data;
  });
</script>

Here is the example I am copying from:

$w.onReady(function () {
// when a message is received from the HTML element
$w(“#myHtmlElement”).onMessage( (event) => {
$w(“#text1”).text = event.data;
} );
} );

export function messageSendButton_onClick() {
// send message to the HTML element
$w(“#myHtmlElement”).postMessage($w(“#textInput1”).value);
}

.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; } HTML Label

Send Message 

<script>
  let text = document.querySelector('#theLabel');
  let input = document.querySelector('#theMessage');
  let button = document.querySelector('button');
  
  button.addEventListener('click', event => {
    window.parent.postMessage(input.value, 'https://mysite.com')
  });
                          
  window.addEventListener('message', event => {
     text.innerText = event.data;
  });
</script>
5

The copy didn’t work - Here is the example from the Velo Documentation:

$w.onReady(function () {
// when a message is received from the HTML element
$w(“#myHtmlElement”).onMessage( (event) => {
$w(“#text1”).text = event.data;
} );
} );

export function messageSendButton_onClick() {
// send message to the HTML element
$w(“#myHtmlElement”).postMessage($w(“#textInput1”).value);
}

.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; } HTML Label

Send Message 

<script>
  let text = document.querySelector('#theLabel');
  let input = document.querySelector('#theMessage');
  let button = document.querySelector('button');
  
  button.addEventListener('click', event => {
    window.parent.postMessage(input.value, 'https://mysite.com')
  });
                          
  window.addEventListener('message', event => {
     text.innerText = event.data;
  });
</script>
6

Sorry - I’m not sure why but my copy and paste is not showing the example correctly - but in my project it is correct???

7

I doubt aybody is interested at this point but I finally got it to copy thru notrpad++

Here is the example from the Velo documentation

Velo Code

$w.onReady(function () {
// when a message is received from the HTML element
$w(“#myHtmlElement”).onMessage( (event) => {
$w(“#text1”).text = event.data;
} );
} );

export function messageSendButton_onClick() {
// send message to the HTML element
$w(“#myHtmlElement”).postMessage($w(“#textInput1”).value);
}

HTML code

.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; } HTML Label

Send Message 

<script>
  let text = document.querySelector('#theLabel');
  let input = document.querySelector('#theMessage');
  let button = document.querySelector('button');
  
  button.addEventListener('click', event => {
    window.parent.postMessage(input.value, 'https://mysite.com')
  });
                          
  window.addEventListener('message', event => {
     text.innerText = event.data;
  });
</script>
8

OK - this is weird - It must be that the code is executing in the blog post because it keeps changing the code after I post it ???

9

No - I am not using that - window.onmessage but I see it in some of the other examples - I will try that and see if that fixes it - is that necessary?