hey guys, I can't seem to get the HTML component in the wix code example to sent a message once it's ready. (https://www.wix.com/code/home/example/Chart)
In the example the HTML sends a message once the body loads... but this doesn't seem to be working. If this is no longer an option, is there another way for the HTML to signal to the Wix page that it is fully loaded and ready to go?
I have entered the exact code in the messaging example (substituting "*" for "http://mysite.com"). The process of entering text in the input box on the page and sending it to the html element text box works ok. But entering text in the input box in the html element and sending it to the page does not seem to be working at all. I've entered my actual website URL, I've hardcoded a message to be sent, I've added diagnostic statements (do console.log statements in the html code work?) - nothing.
Here is my page code:
$w.onReady(function () { //when a message is received from the HTML eleement $w("#myHtmlComponent").onMessage( (event) => { $w("#text1").text = event.data; console.log('Event in onReady triggered.') }); }); export function messageSendButton_click(event) { $w("#myHtmlComponent").postMessage($w("#textInput1").value); console.log('Button clicked, message sent.') }
And here is my html 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;
}
};
// send message to the page code
function button_click() {
window.parent.postMessage(document.getElementById("theMessage").value, "*");
}
</script>
</head>
<body>
<span id="theLabel" class="label">HTML Label</span>
<br/><br/>
<button class="button" onclick="button_click()">< Send Message</button>
<br/><br/>
<input type="text" class="input" id="theMessage">
</body>
</html>
Here is my page when it loads:
And here is it after trying to send messages both ways.
I want to learn how to use the HTML element, but not being able to get off the ground is frustrating. Any ideas?
Thanks, Richard