Wix Bug? > HTML Element

Ask the community
,
1

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.

1297×937 214 KB

PUBLISHED, LIVE VERSION:
Notice the funding goal loads properly, as does the numerical percentage, but not the bar or the PayPal code below.

1088×995 93.2 KB

Here’s the URL, if you want to “inspect” the code: https://www.missionresource.org/project/D.K.-Block-Factory

1 Like
2

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.

3

Hi Giri. Thanks for the info! The PDF would be great. I’m not super-fluent in Javascript yet. Feel free to email it to jonathan.r.earley (at) gmail.

4

Should be in your Inbox right now.

5

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:

INNER HTML:

<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("border").innerHTML = '<div id="bar" style="height:25px; width:' + event.data.percent + 'px; background:#ffffff;"></div>';
} }; 
} }; 
function sendLoadMessage () {
window.parent.postMessage("LoadOk", "*");
}
</script> 
</head>
<body onload="sendLoadMessage ();">
<div id="border" style="width:200px; height:25px; background:none; border:1px solid #fff;">
<div id="bar"></div>
</div>
</body>
</html>

STYLE.WIDTH:

<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("bar").style.width = (event.data.percent * 200) + "px";
} }; 
function sendLoadMessage () {
window.parent.postMessage("LoadOk", "*");
}
</script> 
</head>
<body onload="sendLoadMessage ();">
<div id="border" style="width:200px; height:25px; background:none; border:1px solid #fff;">
<div id="bar" style="height:25px; background:#fff;"></div>
</div>
</body>
</html>

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.

You can check it out here:
https://www.missionresource.org/project/The-Samaritan-FM

Here’s a screenshot of the inspector:

831×276 30.1 KB

It should be inserting <div id=“bar” … etc inside of

Thanks again!

6

Hello Giri, Hello Jonathan,

Unfortunately, it looks like I have the same problem.
I would be really grateful if you could share the code solving this problem here!
Thanks a lot! :slight_smile:

Clara

7

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.

8

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.