I’ve noticed Wix acting very inconsistently. I was finally able to pass some HTML from the database to an HTML element. In the Preview it works… sometimes. However, on the published version it does not work.
My goal was to have the client be able to copy and paste a PayPal code into the database for each project and have Wix Code display the unique PayPal code for each project.
Any thoughts?
Here is the code I’m using:
$w.onReady(function () {
$w("#dynamicDataset").onReady(function(){
let raised = $w('#dynamicDataset').getCurrentItem().amountRaised;
let total = $w('#dynamicDataset').getCurrentItem().investmentTotal;
let payPal = $w('#dynamicDataset').getCurrentItem().payPalCode;
let percent = raised/total;
$w('#percentage').text = Math.ceil(percent*100) + " % funded";
$w("#html1").postMessage({percent: percent});
$w("#payPalCode").postMessage('' + payPal);
console.log(raised + " is the raised amount");
console.log(total + " is the total amount");
console.log(percent + " is the percent");
console.log(payPal + "is the paypal code");
});
});
Inside the HTML block with the ID “#payPalCode”:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function init () {
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
console.log("HTML Code Element received a message!");
insertMessage(event.data);
}
}
}
// display received message
function insertMessage(msg) {
document.getElementById('code').innerHTML = msg;
sendReturnMessage("Message from the HTML Component!");
}
// send message to the page code
function sendReturnMessage(msg) {
window.parent.postMessage(msg, "*");
}
</script>
</head>
<body onload="init();">
<div id="code">Code goes here</div>
</body>
</html>
I’ve attached screenshots of how it looks in the Preview and the live site.
PREVIEW:
You’ll also notice, I’m using some custom code to calculate the amount funded and the funding goal to both create a numerical percentage and a dynamic funding bar. This also works only sometimes in the preview.
Jonathan, it looks like you also ran into the html-component timing problem, like many others, including me. The problem is that, in live mode, you send the message to the html-component before it has finished loading. The $w.onload is only valid for the main page, the loading of the html-comp is spawned off into a separate process. How to solve it? You have to let the html-comp start the conversation when it is fully loaded (in the body onload) sending a heart beat message (anything will do). In your main Wix code, you wait for this message with the .onMessage. And THEN you send the data to the html-comp.
I did a write-up about this, but I cannot upload pdf´s here. If above info is not enough, let me know, I´ll make a quick and dirty web page where you can download the pdf from. It has source examples and, as a bonus, an explanation why this does not happen in Preview Mode.
Thanks a lot!
I got the PayPal code to work. However, I wasn’t able to get the percentage raised thermometer element to work. I tried a couple different methods - one where I set the “InnerHTML” of the surrounding div and another where I set the “style.width” of the inner div. Here are the two methods I used:
When inspecting the element, I didn’t see any evidence of the code being passed to that HTML element, however, I did set a console.log to show that the value was being passed calculated.
Hey Giri. Totally and completely stuck trying to send a message to the html component (you can see my post at “Why on earth this code works only for numeric values?”).
At the same time trying to do the handshake with the html comp. Maybe it’s me, but the examples posted by wix are not fully functional. Would you be so kind to send me that PDF with the write up to agustin@lccomunique.com ? thanks in advance. I’m kind of frustrated that I can make things work and I don’t know for sure if it is my fault or the “BETAsiness” in wix code.
Hey Jonathan. Totally and completely stuck trying to send a message to the html component (you can see my post at “Why on earth this code works only for numeric values?”).
At the same time trying to do the handshake with the html comp. Maybe it’s me, but the examples posted by wix are not fully functional. Would you be so kind to send me that PDF with the write up to agustin@lccomunique.com ? thanks in advance. I’m kind of frustrated that I can make things work and I don’t know for sure if it is my fault or the “BETAsiness” in wix code.