Well this is very odd and I honestly don’t know what is happening.
Here is a picture of the preview of the site:
You can see that the html code element is firing correctly when previewing the site. The code is basically displaying 7 boxes because of a for loop I have as well as the onmessage event that receives how many boxes is actually stored in the order-history database and sets the demo text to “# box(es) stored” (I know the number of boxes doesn’t match the boxes stored, I was just experimenting).
However, the problem arises when I go to the live site page containing the exact same html element, it does not display anything, no boxes and the text is set back to the default text “Data will be previewed here”, as shown below:
You can see everything seems to be working correctly. The following is my Page Code followed by the Html element code:
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(() => {
//TODO: write your page related code here...
let virtualCloset = $w("#html1");
virtualCloset.scrolling = "no";
wixData.query("123FormBuilder_3333677")
.eq("In Warehouse:","Safely Stored!")
.find()
.then( (results) => {
console.log(results.items.length + " boxes stored");
$w("#html1").postMessage(results.items.length);
console.log(results.items[0]);
} )
.catch( (err) => {
let errorMsg = err;
} );
$w("#html1").onMessage( (event) => {
console.log(`Message received by page code: ${event.data}`);
} );
});
Html element code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init () {
window.onmessage = (event) => {
if (event.data) {
console.log("HTML Code Element received a message!");
var box_data=parseInt(event.data);
console.log(event.data);
loop(box_data);
insertMessage(event.data);
}
}
}
function insertMessage(msg) {
if(msg == "1"){
msg += " box stored";
}else{
msg += " boxes stored"
}
document.getElementById('demo').innerHTML = msg;
console.log('insertMessage function is done')
}
function loop(){
var para = document.getElementById('VirtualCloset');
var images = "";
for(var i=1;i<=7;i++){
images=images+'<img src="http://images.clipartpanda.com/box-clipart-jixEpe95T.png" alt="Virtual Box" style="height: 120px;width: 100px;margin:15px;">';
}
para.innerHTML=images;
}
</script>
</head>
<body onload="init();" style="text-align: center;">
<div id="VirtualCloset" style="background-color:white; width:100%; height:100%;text-align: center;"></div>
<p id="demo">Data will be previewed here</p>
</body>
</html>
I see that the tag is duplicated twice, however when I correct this issue, the code doesn’t work in preview mode, so I left it alone. Other than this issue, I am unsure of what could be wrong.
Any help would be greatly appreciated, as this has been quite a work in progress and I am so close to getting this to work.