Connect repeater image field with database

Ask the community
,
1

Hi Guys,

I have a listed repeater which is connected to my database.
This works well and for each row in the database a container is created with some textboxes. Except, that the initial image of the first container is being displayed also for all the other containers which are created. The ‘first or example’ - container of the repeater has an image field #image40. I would like to let #image40 display everytime the corresponding image of the database ''free1" of column image1 for each row.
The code I use so far is like this ( this is created to click on the #image40 field and direct to the dynamic page):

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;

$w.onReady(() => {
$w(“#repeater1”).onItemReady(($w, dataItem, index) => {
let linkToDynamicPage = dataItem[“link-Free1-propertytitle”];
$w(‘#image40’).onClick(() => {
wixLocation.to(linkToDynamicPage);
});
});
})

Can anyone help me with this challenge:)?

Thanks in advance!

Kind regards,

Vincent

2

Hi,

In order to add a specific link to each item in the repeater , use forEachItem() function.
View this link to learn more about this function.
https://www.wix.com/corvid/reference/$w.Repeater.html#forEachItem

Best,
Sapir

3

Keep in mind that whether you use the forEachItem() function as @sapirh suggests, or you use the onItemReady() function as you’ve already attempted, you need to use the Repeated Item Scope in those functions.

4

Thank you both for your answers

Honestly, I really don’t get when reading carefully the Corvid reference pages what to do. I now get something like this:

$w.onReady(() => {
$w(“#repeater1”).forEachItem( ($item, itemData, index) => {
let linkToDynamicPage = itemData[“link-Free1-propertytitle”];
let clickedItemData = $item(“#dataset1”).getCurrentItem().image1;
$item(“#image40”).itemData = clickedItemData;
$w(‘#image40’).onClick(() => {
wixLocation.to(linkToDynamicPage);
});
});
})

@yisrael-wix and @sapirh could you help me with writing the code please?

Kind regards,

Vincent

5

Thats a copy from my project!

$w('#repeaterActivites').forEachItem(($item, itemData, index) => {
            $item("#repeatedImage").src = itemData.photo;
            $item("#repeatedTitle").text = itemData.title;
            $item("#repeatedText").text = itemData.short_description;

            const link = itemData['link-Excursions-title'];
            $item('#repeatedImage').link = link;
        })

You can see that you can remove your onClick-Function just past the link:

const link = itemData['link-Excursions-title'];             $item('#repeatedImage').link = link;

Here the “live-demo”

6

Hi @benibrodi , thanks for your reply. I tried what you explained. But first I don’t understand why I should remove the onClick function because now nothing is triggered when I click on the #repeatedImage ( for my project it is #image40). Second where is the connection with the database to collect the image forEachitem()? I saw your website that it works for you indeed. Could you send me a copy of your page code from the page ( https://noe342.wixsite.com/website/activites ) if possible?

Kind regards,

Vincent

7

That was a snipped code from the page!

BEAWARE : I don’t know your ID of the Element. Those HashTags are mine (eg. “#repeatedImage”, #repeatedTitle", …). You have to Past your Hashtags in.

You can QUERY the Database… here an example:

$w.onReady(() => {

 wixData.query("yourDatabase")
 .find()
 .then(res => {
       $w('#yourRepeater').data = res.items;

       $w('#yourRepeater').forEachItem(($item, itemData, index) => {                       
               $item("#repeatedImage").src = itemData.photo;             
               $item("#repeatedTitle").text = itemData.title;                 
               $item("#repeatedText").text = itemData.short_description;
               const linkToItem = itemData['link-Excursions-title'];             
                 $item('#repeatedImage').link = linkToItem;
           }) 

    }).catch(err => {
        console.error(err.message)
    })

 }
}

But I don’t get what you wanna have with your “image” click? What should happen when you click on the image?
I thought you wanna go directly to the Dynamic-Page, the same effect like in my project.
Or am I wrong?