Display "collection" data in HTML document

Ask the community
,
1

I have a link which can be displayed when inserting it straight into the HTML element on a page. This works.

I have created a client profile section where clients can login. What I need to do is “pull” this link address from my collection and display it in my HTML doc, which changes as the logged-in client changes, thus displaying different data for every client.

I have been at it for a few days trying all sorts of different methods, but I can’t seem to get my head around it… Has anybody attempted something similar?

2

Yes, I have. Look at this example : Velo: Working with the HTML iframe Element | Help Center | Wix.com

You have to send a message from your code to the html-component for each “client”, pulling the html from your dataset and “message” it to the (cleint side) html inside the html-component.
It works with things like <a href …> and .

3

Depending on what you’re trying to do, you can do as Giri mentions above or you can try something simpler. You can set the URL of an HTML component from a value in the page’s dataset.

How you do this depends on the type of page you are doing it on.

If it is a dynamic item page, the easiest thing is to do it in the dataset onReady event handler. So, something like this:

$w.onReady(function () {
  $w("#dataset1").onReady( () => {
    $w("#htmlComp").src = $w("#dataset1").getCurrentItem().urlField;
  } );
} );

If you’re doing this on a page that has a dataset with multiple items, you probably want to use the dataset.onCurrentIndexChanged instead of dataset.onReady.

4

Hi Sam

Thank you for this. It is a dynamic page that I am trying to do this on.

I have a dataset with 6 fields. In my last field I inserted a link to google sheets (specific to each client), which should then update the HTML component as the users change.

I have used your suggested code, replaced #dataset1 with my dataset’s name and updated the htmlComp, but I’m getting an error that says “dataset1” is not a valid sector name. Also, where in this code would I need to specify the specific field name?

5

1254×659 65 KB

Hi Sam

Got all those bugs worked out. What I am left with is the following, but still no display in the html component…

Where do I enter the specific field name?

6

1254×659 65 KB

7

1031×661 55.4 KB

8

I assume you checked that the dataset is properly connected to a collection. Are there other elements connected to this dataset? Are they working properly?

9

I did yes… The title, Name, Surname, Email & Phone elements are all connected and update upon different user login

10

I’ve tried something else here, a lot simpler…,

$w.onReady(function () {
$w(“#html1”).src = “Wikipedia, the free encyclopedia”;
});

When I do this, the html component displays the wikipedia page, however if I put the wikipedia link inside a textbox (called #text9) and make the source the textbox (see below), it doesn’t work anymore. Any ideas?

$w.onReady(function () {
$w(“#html1”).src = (“#text9”);
});

11

You’d need to add .value to get the value of the text box. (Note: if you’re actually talking about a text element, you need to add .text instead.)

Have you tried using the link to one of the actual links from your collection using the same code you used to display the Wikipedia page?

12

I’ve tried both .text & .value…, nothing happens. On preview I get the following 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.

I have tried posting the link from my google sheet directly, that also works

13

Seems like the value you are getting is empty. Did you try console.logging the .text or .value to try and isolate the problem?

14

Hi Sam

I get the following errors on the consol.log with both .text & .value & .html… Any advice?

15

I don’t see the value or text being logged, which might mean that it is empty or you aren’t accessing it correctly. Can you paste your full page code?

16

There’s not much in it, only this:

$w.onReady(function () {
$w(“#html1”).src = (“#text9”).valueOf();
});

1428×658 62.6 KB

What I’ve done was simply to connect a text element to the data which pulls through the link from the database, and then I am trying to make the value of the text element the source for the html element

17

valueOf is not a Wix API function. Also, you do not have a $w before the (“#text9”).

18

There is no “value” API.
.text is available, however it only pulls through the plain text in the text element, not the value that updates as users change, meaning it won’t work for my purposes

751×389 30 KB

1201×483 20.6 KB

19

Now I’m confused. I thought text9 contains a URL that you want to use as the source link for the HTML Component. In that case, using .text should work just fine. It works for me in a test page I’ve created.

However, link value is populated into the text element from a dataset, you will have to wait until the dataset is ready before you pull the value as I mentioned above previously.

So, your code should look like this:

$w.onReady(function () {
    $w("#dynamicDataset").onReady( () => {
      $w("#html1").src = $w("#text9").text;
    } );
});
20

That worked. Thank you Sam!!