How to make an html element src dynamic?

Ask the community
,
1

I’m trying to display an html element depending on the member logged in. The only difference in the html code is that the src url changes dependent on the member.

In my data collection, each member has a google sheet assigned to them as a URL field. The column field key is: googlesheets and I have set it as a URL.

I have tried adding this code to the page code:

$w.onReady( () => {
$w(“#dynamicDataset”).onReady( () => {
const itemUrl = $w(‘#dynamicDataset’).getCurrentItem().url;
$w(‘#html1’).src = itemUrl;
} );
} );

But it’s coming up with this error:

Wix code SDK error: The url parameter that is passed to the src method cannot be set to the value . It must be of type url.

973×297 25.5 KB

Please could you help?

2

Hi Jasmin,

Welcome to the Wix Code forums.

What component are you using for the URL? $w.HtmlComponent or $w.Text ?

The HtmlComponent is used for embedded HTML code. You can read the article Working with the HTML Component in Wix Code for more information.

The Text component can be set to a URL as follows:

$w("#text1").html = '<a href="http://wix.com" target="_blank">Stunning web sites</a>';

It seems that what you are trying to do is create a link to a Google sheet, which could easily be done with the Text component. If you are trying to “embed” the Google sheet in the page, then you’ll need to use an HtmlComponent, and pass the URL to the HTML code in the component as described in the article I referenced above.

Good luck,

Yisrael

3

Hi Yisrael

Thank you for your reply. Yes - I would like to “embed” the Google sheet in my page. I want to pass the URL from my database to the src within my HTML code. (The html element code is simply: )

I am new to javascript coding and so am struggling to completely understand the articles you provided.

From what I understand - I first want to call on the correct item of data from my database (field key: googlesheets), then I want to insert that url into the src of my #myhtml element. Each member has their own googlesheets url, and I want to show the member who is currently logged in their sheet.

This is the code I have…

$w.onReady( () => {
$w(“#dynamicDataset”).onReady( () => {
let newSrc = $w(“#dynamicDataset”).getCurrentItem();
$w(“#myhtml”).src=newSrc;
} );
} );

However I’m unsure how this code would know to gather the googlesheets url from my database… am I missing something?

I’m getting this error: “Wix code SDK error: The url parameter that is passed to the src method cannot be set to the value [object Object]. It must be of type url.”

Any help is greatly appreciated!

4

Aha - now I understand.

Your problem is really very simple. I think you just have to get the googlesheets field from the returned item.

Something like this:

let item = $w("#dynamicDataset").getCurrentItem();
let url = item.googlesheets;
$w("#myhtml").src = url;

I hope this helps.

5

Hi Yisrael

Thank you so much, this works!

:slight_smile:

6

Hi Jasmin!

Is there anyway you could share the completed code so I can see how you put it together so I don’t mess up the order of operations?

Thank you
Jim