Hi everyone!
I have created in the database a dynamic collection.
Now, I want to add to this collection a list of embed links (each item have its own embed link) to run online games.
After some digging on the internet, I found out that I need to add an HTML component on the dynamic page, and also add a few codes to the HTML ( postMessage and onMessage)
The thing is that I’m new in Wix and I don’t know from where to start.
This is one embed link for example "
"
Let’s say that the database collection name is “online” and the HTML component name is “1html”
Thanks!
According to this artical I need to add this to my website.
$w(“#myHtmlComponent”).postMessage(“Message for HTML Comp”);
< script type=“text/javascript”> window.onmessage = (event) => { if (event.data) { let receivedData = event.data; } }; //… </ script >
Am I right? But I don’t know how to direct this to the right location in the database.
This is my data base collection. the “linkurl” field is set to text.
So last update, after many attempts I think that this is the closest solution:
I hope it will help with the solution.
import wixData from 'wix-data';
$w.onReady( () => {
$w("#html1").postMessage ($w("dynamicDataset").wixData.getCurrentItem("linkurl"))
.then( (results) => {
let receivedData = results;
})
.catch( (err) => {
let errorMsg = err;
} );
});
////*** I added this in the HTML component ***///
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
}
};
</script>
Hey Eitan,
Looks great! But I don’t see is it solved already? Do you need any additional help with your question?
Best regards,
Max
Yes, it would be great if you help me
Ok, I see a couple of issues here
import wixData from 'wix-data';
$w.onReady( () => {
$w("#html1").postMessage (
$w("dynamicDataset")
// use try to use dataset name to query $w
// but you have to use dataset id (component id)
// the same way you did with html component
// it's probably something like #dataset1
.wixData.getCurrentItem("linkurl"))
// here you can just use `getCurrentItem` it's a method of dataset component
.then( (results) => {
let receivedData = results;
})
.catch( (err) => {
let errorMsg = err;
});
// this whole `then` `catch` thing is broken if
// because it didn't use data nor it returned it an further
});
You can fix it by using something like this
$w.onReady(async () => {
// you can use async/await instead of promises
// don't forget to replace with your dataset id
const embedCode = await $w('#dataset1').getCurrentItem().linkurl;
$w('#html1').postMessage(embedCode);
})
Or if you want to stick to promises
$w.onReady(() => {
$w('#dataset1').getCurrentItem().then(currentItem => {
const embedCode = currentItem.linkurl
$w('#html1').postMessage(embedCode)
})
.catch(error => {
console.warn(error)
})
})
Check out docs on getCurrentItem and dataset capabilities in general, plus I recommend you reading a little about promises or async/await so basic syntax mistakes won’t block you from doing awesome things with WixCode.
After those changes (with minor corrections) you should start receiving your embed code in your html component iframe postMessage handler
Thanks, Maksim
It seems that I needed to create a new dataset from the + icon and to assign it to the collection name in the database, cause #dynamicDataset was the only one that I saw.
I tried these 2 code option but it doesn’t work, I received a null error at the .getCurrentItem (I think that the code is ok, but something is not set right).
/**this code is in the HTML component**/
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
}
};
</script>
A picture of my data set
The Error
Ok, so getCurrentItem apparently doesn’t return promise, there’s no need for async and await statements there it will just return a value.
As for dataset, you need dataset that is connected to collection that has linkurl field you’re trying to get, if #dynamicDataset connected to it you don’t need the second one.
Ok, now after I click preview nothing happens
Furthermore, with the #dynamicDataset the await doesn’t give me any error…
BTW Using the Promises with the #dynamicDataset on preview I see: not function error on line 2
Hi, I am very new to code. I am trying to embed a google my map onto a dynamic member page. Can someone help me make it work?
I need to have the linkurl field (set to text) be dynamic for each customer for example:
daniellefernandezdesigns , you can add an “Embed a site” component, set his size manually and use this code:
import wixData from 'wix-data';
$w.onReady(async () => {
const embedCode = await $w('#dynamicDataset').getCurrentItem().linkurl;
/**dynamicDataset is the ID of the database **/
$w('#html1').src = embedCode;
/**html1 is the ID component name **/
})
Hi eitan462! Thanks for responding! I tried the code you sent and have the linkurl field set as text - is this correct? I’m getting the following error - what am I doing wrong?
Make sure you are using the right database ID.
The linkurl should be only the URL to the page, which in this case is: “Illinois Farms & Ranches Listed on Eatwild.com - Google My Maps”
Cause .src can only contain a URL link.
I am still getting the same error TypeError: Cannot read property ‘linkurl’ of null
Is your dataset1 connected to the right database collection?
Change the FiledType to text, enter only the link in the filed and then try
Yes, dataset1 is correct I think as I am trying to access the LandAssessment Dataset:
And hmtl1 is correct for where I want the code embedded
I changed the field type back to text from URL
same error TypeError: Cannot read property ‘linkurl’ of null
did you change the HTML component to “embed a site” component?
I’m not sure what you mean?
I think I figured it out! I was testing out a regular website ie www.daniellefernandezdesigns.com vs the google maps. In my particular case, the client needs to display google “my maps”. The url I had was not set to “public” and I had to use the website listed in the “embed site” link rather than the “share” link. I also used the code from an earlier post because I knew it was working for www.daniellefernandezdesigns.com.
So for anyone else looking to embed a google my map or a regular website here’s what I did:
LandAssessment data set = #dataset1
The Aerial view of the property = #html1
linkurl = the field in my LandAssessment Database set to Text Field Type
In google my maps - you must click Share+ then you must make the map public before it will allow you to Embed
Use highlighted code from the embed site
DO NOT Use the Share+ Link
