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?
Hey,
I was able to view the chart on the example, can you please clarify what’s not working on your end?
You can check out this article to learn more about HTML Component Messaging .
Best,
Tal.
Hey Tal!
So the HTML chart in the wix example is set to send a message to the Wix page when it is finished loading . When the Wix Page receives the message it then sends over the Flight data to the chart. If you add a Console.log to the onMessage === “ready” you notice that is never actually runs.
While the example still works, it doesn’t really work like it’s supposed to. As far as I can tell, this is because the html component is rendered/loaded before the wix page and the message it sends to the wix page is lost in cyberspace. The order in which the components and page are loaded throws off all communication.
For what I am doing though, I really need the “ready” message to work. I was able to circumvent this with adding a delay to the sendMessage function (from my wix page to the HTML), but this really isn’t a solution as it breaks down for slower computers. Here is what I am working on (https://www.evaultcompany.com/Products/a34a798c-4a17-4622-a8c2-db60741dcfc6) After you add in a ‘Vault size’ and click ‘Edit Vault’ you are taken to the page with the chart I am concerned with. It would be really nice if I could get the “ready” message from the HTML to trigger the sending of data to the HTML chart. It seems that if I just send it in the onReady function it is not received by the HTML chart… which im assuming just hasn’t loaded yet. It’s almost the opposite of the problem with the Wix Code Charts example (chart loads before page).
I have been working on this problemm for weeks and It doesn’t look like i’m the only one: https://www.wix.com/code/home/forum/questions-answers/postmessage-onmessage-no-longer-working
Maybe you could shed a little light on this. It would be fantastic if this feature could become functional again! As i’m sure you well know, the Wix platform becomes exponentially more powerful when you use it in tandem with HTML components! I love Wix, and hope we can get this resolved.
Hi Tal,
I got the chart example to work!
But I would like to update the chart labels from my page code. How should I go about doing that?
Page Code:
let year = 2017;
let flights = {
2014: [6.3, 2.4, 7.6, 5.4, 9.9, 7.8],
2015: [6.7, 2.2, 11.2, 5.5, 10.1, 7.9],
2016: [7.2, 3.1, 8.2, 5.6, 9.2, 10.2],
2017: [7.4, 3.9, 8.8, 6.1, 8.7, 9.8]
};
let label = {
label1: "Jan",
label2: "Feb",
label3: "Mar"
};
$w.onReady(() =>{
$w("#html1").postMessage(flights[year]);
$w("#html1").onMessage((event)=>{
if(event.data.type === 'ready'){
$w("#html1").postMessage(flights[year]);
$w("#html1").postMessage(label);
}
if(event.data.type === 'click'){
$w("#clickedMessage").text = `The number of flights to ${event.data.label} in ${year} is ${event.data.value} million.`;
$w("#clickedMessage").show();
}
});
});
export function year_onChange(event) {
year = $w('#year').value;
$w("#html1").postMessage(flights[year]);
$w("#html1").postMessage(label);
}
HTML iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: {
datasets: [{
label: 'Flights in Millions',
data: [],//start empty
backgroundColor: [
'rgba(10, 168, 196, 0.2)',
'rgba(102, 96, 151, 0.2)',
'rgba(57, 87, 255, 0.2)',
'rgba(233, 182, 233, 0.2)',
'rgba(108, 213, 207, 0.2)',
'rgba(125, 178, 230, 0.2)'
],
borderColor: [
'rgba(10, 168, 196, 1)',
'rgba(102, 96, 151, 1)',
'rgba(57, 87, 255, 1)',
'rgba(233, 182, 233, 1)',
'rgba(108, 213, 207, 1)',
'rgba(125, 178, 230, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
onClick: handleClick
}
});
window.onmessage = function(event){
if (event.data && Array.isArray(event.data)) {
myChart.data.datasets[0].data = event.data;
myChart.update();
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(e){
var activeBars = myChart.getElementAtEvent(e);
var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
var label = activeBars[0]._model.label;
window.parent.postMessage({
"type":"click",
"label":label,
"value":value
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>
Thank you.
Ben
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.
.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; }<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>
Here is my page when it loads:
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
Please add a new post rather than bumping up an old thread from 2018, with a link to refer back to this or any other previous forum post if needed.
Old post being closed.
