On my Dynamic Page I have a HTML Element the Code for this HTML Object in in a Dynamic Dataset.
The Fieldname in the Dataset is “htmlcode”
The ID of the HTML Element is “#html1”
The ID of the Dataset is “#dynamicDataset”
This is what I used on the Pagecode to send the Message
$w.onReady(() => {
$w('#dynamicDataset').getCurrentItem().then(currentItem => {
const embedCode = currentItem.htmlcode
$w('#html1').postMessage(embedCode)
})
.catch(error => {
console.warn(error)
})
})
This is what I used in the HTML Element to receive the Message
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
}
};
</script>
But when I Test the Page I Get this Error:
TypeError: $w(...).getCurrentItem(...).then is not a function
Try this one…
$w.onReady(() => {
$w('#dynamicDataset').onReady(async()=>{
let ITEM = await $w("#dynamicDataset").getCurrentItem();
let embedCode = ITEM.htmlcode;
$w('#html1').postMessage(embedCode);
});
});
<script type="text/javascript">
window.onmessage=(event)=>{
if(event.data){
let receivedData = event.data; console.log(receivedData)
}
};
</script>
Unfortunately this doesn’t work
The Field Type is Text is this correct?
This is the Error:
Wix code SDK error: The message parameter that is passed to the postMessage method cannot be set to the value . It must be of type object,string,number,boolean,array.
let embedCode = ITEM.htmlcode; console.log(embedCode);
What do you get in the console for —> console.log(embedCode);
You can try to convert it to a STRING…
let embedCode = (ITEM.htmlcode).toString()
//...or...
let embedCode = String(ITEM.htmlcode)
@russian-dima I don’t get anything in the console except the Error mentioned earlier
This is what I get when I Show all
Loading the code for the TestDatabase (Title) page. To debug this code, open x6urm.js in Developer Tools.
[onReady callback registered] on wix-dataset
[datasetReady event] triggered on wix-dataset
[wix-dataset.getCurrentItem] called
[wix-dataset.getCurrentItem] returned with ( {...} )
@samugeier
This is the important one…
Click onto the 3-dots to open the result-object.
@russian-dima
_id:
"b4b3cb2c-9b87-4159-a4c4-b9a04aa9eb8e"
_owner:
"8636d911-12e2-45b9-beec-50860162bc09"
_createdDate:
"2021-06-13T19:39:47.117Z"
_updatedDate:
"2021-06-15T10:23:45.053Z"
htmlCode:
"<html><body><table style=\"width:100%\"><tr><th>Test</th><th>Table</th> </tr>\n <tr><td>Element</td><td>1</td></tr></table></body></html>"
title:
"Element1"
link-testdatabase-title:
"/testdatabase/element1"
The HTML Code is just for Testing
@samugeier
Strange!
The → “htmlCode” is already a STRING in your Object.
So what about this one? Which results do you get for all the given CONSOLE-LOGS in the following example-code… (does it work?)…
$w.onReady(()=>{
$w('#dynamicDataset').onReady(()=>{
$w('#dynamicDataset').getCurrentItem().then(currentItem=>{
let ITEM = currentItem; console.log("ITEM: ", ITEM)
let HTMLCODE = ITEM.htmlCode; console.log("HTMLCODE: ", HTMLCODE)
$w('#html1').postMessage(HTMLCODE)
})
.catch(error=>{console.warn(error)});
});
});
<script type="text/javascript">
window.onmessage=(event)=>{
if(event.data){console.log(event)
let receivedData = event.data;
console.log("receivedData: ", receivedData)}
}
else{console.log("No data received!")};
</script>
@russian-dima
This is the Error I get:
An error occurred in one of datasetReady callbacks TypeError: $w(...).getCurrentItem(...).then is not a function
@samugeier
Correction. This should work…
$w.onReady(()=>{
$w('#dynamicDataset').onReady(()=>{
let ITEM = $w('#dynamicDataset').getCurrentItem(); console.log("ITEM: ", ITEM)
let HTMLCODE = ITEM.htmlCode; console.log("HTMLCODE: ", HTMLCODE)
$w('#html1').postMessage(HTMLCODE)
})
.catch(error=>{console.warn(error)});
});
@russian-dima
Unfortunately not. The HTML Element still doesn’t show anything.
Loading the code for the TestDatabase (Title) page. To debug this code, open x6urm.js in Developer Tools.
TypeError: $w(...).onReady(...).catch is not a function (Line 7)
TestDatabase (Title)
ITEM: {...}
TestDatabase (Title)
HTMLCODE: <html><body><table style="width:100%"><tr><th>Test</th><th>Table</th> </tr> <tr><td>Element</td><td>1</td></tr></table></body></html>
@samugeier
So, as we can see your page-code already works like it should.
The only thing what still do not work is the HTML-CODE-PART, right?
So lets do the second part…
<html>
<head>
<script type="text/javascript">
function init(){
window.onmessage=(event)=>{
if(event.data){console.log("HTML Code Element received a message!");
let receivedData = event.data;
console.log("receivedData: ", receivedData)
showMessage(receivedData);
}else{console.log("No data received!")};
}
}
function showMessage(msg){
document.getElementById('demo').innerHTML = msg;
sendReturnMessage("Message from the HTML Component!");
}
</script>
</head>
<body onload="init();">
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>
@russian-dima The HTML element just shows “HTML Component Test
Message will go here”
This is what I get:
Loading the code for the TestDatabase (Title) page. To debug this code, open x6urm.js in Developer Tools.
[onReady callback registered] on wix-dataset
TypeError: $w(...).onReady(...).catch is not a function
[datasetReady event] triggered on wix-dataset
[wix-dataset.getCurrentItem] called
[wix-dataset.getCurrentItem] returned with ( {...} )
ITEM: {...}
HTMLCODE: <html><body><table style="width:100%"><tr><th>Test</th><th>Table</th> </tr> <tr><td>Element</td><td>1</td></tr></table></body></html>
As far as I can see the messages from the HTML element are missing
@samugeier The code works 100%. I tested it on my own SETUP.
Delete the CATCH-CODE-LINE.
- Check if your SETUP is ok.
- Check element-IDs.
- Check DATASET-ID.
- Check DATAFIELD-IDs.
When you do your setup the right way, everything will work like expected.
Page-Code:
$w.onReady(()=>{
$w('#dynamicDataset').onReady(()=>{
let ITEM = $w('#dynamicDataset').getCurrentItem(); console.log("ITEM: ", ITEM)
let HTMLCODE = ITEM.htmlCode; console.log("HTMLCODE: ", HTMLCODE)
$w('#html1').postMessage(HTMLCODE)
})
});
HTML-CODE:
<html>
<head>
<script type="text/javascript">
function init(){
window.onmessage=(event)=>{
let receivedData = event.data;
if(receivedData){console.log("HTML Code Element received a message!");
console.log("receivedData: ", receivedData)
showMessage(receivedData);
} else{console.log("No data received!")};
}
}
function showMessage(msg){
document.getElementById('demo').innerHTML = msg;
sendReturnMessage("Message from the HTML Component!");
}
</script>
</head>
<body onload="init();">
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>
@russian-dima Thank you so much. It actually worked but only if I publish die Website. In the Preview it doesn’t seem to work
@samugeier
You are welcome.
Your Live-Database & your Preview-Database are synced?
Hi @CODE-NINJA !
Thanks for this great solution! I implemented it on my wix site a few months ago and it worked like a charme. Unfortunately it stopped working now (without any changes). The HTML component now shows [Object object] and in my console it says sendReturnMessage is not defined.
Any idea or tips?
Best Regards
Alessandra
Which ERROR do you get?
It is important to know → WHAT THE ISSUE IS?
What kind of ERROR-OUTPUT do you get inside of the CONSOLE ?
You want to know what the CONSOLE is? → Press F12 on your keyboard inside of your BROWSER (google-chrome) → the CONSOLE will open.
Check the errors you get.