HTML component with Google

Ask the community
,
1

I have a problem I just can´t solve. I display a Google Sheet inside an HTML-component using the messaging interface. In preview mode, all is well, but in the published version, the sheet is empty (but the below string is passed on OK)
Google gives you something like

So it can´t be the https-https documented difference in behaviour between published/preview mode.
Anyone got any idea?

2

Giri,

Do you see anything in the browser console in the published site?
Can you share a link to the site?

3

Hello Yoav,yes I allready looked at the browser console. The div where innerhtml should be changed by the postmessage is as empty as my purse. So I built a testpage where I postmessage a google sheet string hardcoded to the html component. Same result: works in preview, not in published.
This cannot be a Wix problem, I think. I remember from having worked with the table-component (not yours, but that component that shows a html table and can take a Google Sheet as input), that it took a myriad of Google Sheet settings for SHaring and Publishing to get it working. SO maybe it´s that: that in preview mode I´m working as a different user as in Publish mode (which I am). I will look at at again tomorrow and if I can´t solve it, I will come back here. Thank for helping.

4

Yoav, I looked at it again and it is not a Google problem, I think. I built a testpage demonstrating the problem at https://v25matccdprop.wixsite.com/sanrafael-25demayo/testpage

In it, I set a hardcoded Google Sheet string. It is set as textinput.value, so if you click the Button-button, the sheets open perfectly (this is the code from your article.). Therefor, it cannot be a Google Sheets problem, I think.
Lower, I message the same string to the html-component. In preview mode, this code is inserted into the DIV´s nicely and it also shows the sheet. In publish mode, the DIV´s are empty.

Any help would be appreciated, I am clueless about what the cause is.

5

Yoav, I think I have got a cause. On the same testpage, I put a Timeout button. After the bottom html component if fully loaded, I press it. This sends the same google string to the other html-component that wouldn´t show the sheet onload. And then it works.
Could it be that the $w.onLoad waits for the Page to load, but not for the html inside the HTML component, so the postmessage is fired when the component is not ready to receive yet?

6

Solved!!!
It involved a timing problem: the HTML was sent to the html component before it was ready.
Solution:

  1. let the html-component send a message (any text) when it is loaded on the Body Onload inside the component´s html
  2. in your main program, wait with the onMessage listener until you received this heart beat
  3. now send the html
  4. in the same html as 1, put the html in it´s place with innerHtml

The above for anyone not willing to spend a day or two.

7

facing same issue…
will try your suggestions:)