Hello,
I am trying to add unique HTML widgets with unique HTML codes into my dynamic pages. Is this possible?
Hi,
Take a look at this thread (and at the first comment) - https://www.wix.com/code/home/forum/community-discussion/how-to-get-embed-code-from-database-to-html-iframe - probably, it will give you a direction.
Thank you! That is exactly what I am looking for. I currently have this code on my dynamic page:
$w.onReady( function () {
$w(“#html2”).onMessage( (event, $w) => {
console.log(Message received by page code: ${event.data});
} );
$w(“#html2”).postMessage(“Message from page code!”);
}
);
And this is what I have in the html component:
<!doctype html>
HTML Component Test
Message will go here
This makes the html component test work perfectly. How do I now change it to take the information from my database? I see in the other post you mentioned getcurrentitem. Where and how do I insert this into my code?
Also, when putting the html code into my database, which field type should it be?
I apologize for all my questions! I am very new to all of this, but I love learning it! Thank you for your help!
That’s cool - we glad you learn our platform 
There is a ton of documentation for Wix Code features - you are welcome to check them out. This would be a good starting point - https://www.wix.com/code/home
As for your question specifically - when you add a dynamic page, it is connected to some collection, right? So each dynamic page represents a data from a single collections row. You can access that row in the context of the page - fetch data from it, display it, etc.
This could be done using dataset - the abstraction representing the data from the collections. When you create a Dynamic Page, a default dataset is created automatically - check the dynamic page template. It looks like this:
You can write your own code (in that $w.onReady section for example) accessing the dataset - $w(‘dynamicDataset’) - and getting the current item from it. Check the API reference for more details on how to work with it.
Regarding the field type in the collection - depends on what exactly you want to store there. If it’s some HTML code - the Text type would be the correct choice.
A bit more resources for the Dynamic pages:
https://www.wix.com/code/home/dynamic-pages
A small note about posting messages to IFrame :
For now, due to asynchronous nature of loading of the IFrame component, it is possible that the code in the onReady section will run before the IFrame loaded - meaning that the message would be sent before the IFrame is able to get it (so it will be lost).
The basic workaround in this case will be to send the message after a small delay:
instead of $w(" #html2 ").postMessage(“Message from page code!”); it would be setTimeout(() => $w(" #html2 ").postMessage(“Message from page code!”), 2000).
We are looking into this to improve this experience.
Hope it helps
Thank you! I have a dataset on my page. The field key for the HTML code in the database is htmlCode. The dataset is #dynamicDataset.
The page code is:
$w.onReady( function () {
let itemObj = $w(‘#dynamicDataset’).getCurrentItem().htmlCode;
$w(“#html2”).onMessage( (event, $w) => {
console.log(Message received by page code: ${event.data});
} );
setTimeout(() => $w(“#html2”).postMessage(“Message from page code!”), 2000)
;
}
);
The code inside the iFrame is:
<!doctype html>
Currently, the iFrame is a seethrough box. Am I missing the code to connect the iFrame body to the dataset? Is the page code correct now? Thank you for all your help!
Thank you so much for your help! I got it to work with just one hiccup. Since I copy pasted an example HTML code that included a button, I can’t seem to remove it! I am not sure where that code is in my iframe. I have deleted code snippets I thought were responsible for the button, but that has just resulted in removing everything except the button. I am sure this is an easy fix, so I apologize for my ignorance! Here is my code:
HTML Label<input type="text" class="input" id="theMessage">
Alexander, I just happened to stumble across this thread. You state:
A small note about posting messages to IFrame :
For now, due to asynchronous nature of loading of the IFrame component, it is possible that the code in the onReady section will run before the IFrame loaded - meaning that the message would be sent before the IFrame is able to get it (so it will be lost).
The basic workaround in this case will be to send the message after a small delay:
instead of $w(" #html2 “).postMessage(“Message from page code!”); it would be setTimeout(() => $w(” #html2 ").postMessage(“Message from page code!”), 2000).
If you look closely, Beverly used a piece of code that I published on this forum a long, long time ago, as a solution to the problem that the page loads first, but the html-component isn´t ready yet. I re-published it on my blog here : https://girizano.wixsite.com/codecorner/home/html-component-not-running-in-publish-mode-google-sheets-example
Basically, the Wix Page waits for a “heart beat” from the component BEFORE it sends the content with postMessage. You offer an alternative, using a timeout (2000 ms). I am not a great proponent of relying on time-outs, since it relies on guessing (and in my case, on the slower side of the Internet world, 2 secs isn´t even enough sometimes). But, everybody if free to implement any solution that they seem fit.
But there is another problem: when the html-component loads BEFORE the Wix Page. I ran into this behaviour when developing my alternative date picker (https://girizano.wixsite.com/codecorner/home/date-picker-in-another-language). Suddenly, the component started to load consistently before the page, or in other words, the Wix Page loaded after the component.
Then this would happen:
- component loads, send heart beat message
- Page not ready yet, message goes into deep space
- result: html-component stays empty
I have discussed this with some of you, do not remember who (it´s still here on this forum), but the only workaround that I found to work reliable in BOTH cases (page loads before component/component loads before page) was to throw it twice: at the top of your page, you send the info to the component and you ALSO wait for a heart beat, as earlier described.
This means:
- if component is loaded before page, it sends the heart beat, page not ready, so ignored. When page is ready, data is received anyway because it is sent from the beginning of the page
- if component is loaded after page: first message from Wix Page to component is sent, but goes into deep space because component has not loaded yet. When component IS loaded, sends heart beat, is received by page and message is sent AGAIN, html-component receives data, all well.
So, worst case, you send it twice. Just wanted to let you know about these problems and solutions and, if you have a better alternative, or if I am mistaken somewhere, please let me know.
Hi Giri,
Thank you! It looks like the timeout is not working. I tried clicking the links you provided but received an error 404 message. Could you tell me a little more about this code?
You guys are so close to answering a very similar query I have ref: dynamic music streams (I.e soundcloud/bandcamp) and how to pull from database to html box. Is it possible anyone here could message or email me to try and talk me through it? I’m an absolute beginner with coding.