Retrieve the items data that is clicked in a repeater

Discussion Ask a question
,
1

I have been trying to achieve this for the past week but I am on the verge of giving up! So in need of help PLEASE! Thank you

I have a repeater on my page that I connected to a dataset by code.
The container in the repeater has three elements:
a text for the name, a text for an email, and a button.
The email and the name texts come from the dataset.

On the page, I have an empty user input element, a text box.

I added a function button in the repeater so that every time I click on the corresponding button of a container in the repeater the email of that container gets added to the text box so I can send a mass email to all the recipients in that text box.

I was successful in connecting the elements of the repeater to the dataset.
And I was also semi-successful in adding the email address from the repeater to the text box by creating an onClick function that adds the email to the text box. BUT (and here where the problem is), it is only doing so for the FIRST container in the repeater whereby if you click any of the buttons in the repeater, the value of the text box will be equal to the value of the first email of the first container.

I know this might be complicated, so THANK YOU in advance for any help or advice.

import wixData from ‘wix-data’;

$w.onReady( function () {
});

$w.onReady( function () {
$w(“#repeater1”).onItemReady( ($w, itemData, index) => {
$w(“#text113”).text = itemData.email;
$w(“#text111”).text = itemData.givenName;
$w(“#text112”).text = itemData.practiceAreas;
} );

wixData.query(“CommunityMembers”)
.find()
.then( (results) => {
$w(“#repeater1”).data = results.items;
} );
} );

function emailCombine () {
$w(“#textBox1”).value = $w(“#text113”).text;
}

export function button1_click(event, $w) {
emailCombine ();
}

1 Like
2

You need to add an event handler to each button in the repeater so that when the button is clicked it gets the correct item. You’re onItemReady() function should look something like this:

$w("#repeater1").onItemReady( ($w, itemData, index) => {
   $w("#text113").text = itemData.email;
   $w("#text111").text = itemData.givenName;
   $w("#text112").text = itemData.practiceAreas;

   $w("#button1").onClick((event, $w) => {
       $w("#textBox1").value = $w("#text113").text;
   });
} );

See Repeater and Repeater.onItemReady for more information.

I hope this helps,

Yisrael

2 Likes
3

It worked perfectly!!!

I just have one more question tho. I am getting this error:
Wix Code SDK warning: the text parameter of text 112 that is passed to the text method cannot be set to null or undefined.

Not sure what that means. Text112 is displaying in preview mode the data from the dataset correctly.

4

Hey chajj,

There might be a case where itemData.practiceAreas is null or empty and you are receiving a warning when this happens.

5

Hi @yisrael-wix

Thank you for sharing the above code for chajj, I was able to apply a part of it for a similar task I am trying on my website. I feel like I’m ALMOST able to accomplish what I hope to do, I just need help with a couple more things and am very much hoping you can help me :slight_smile:

Here is my scenario:

I have a regular page where I’ve built a custom form and a repeater to display dynamic content from my “Venues” database. The custom form button has been placed within the repeater. The custom form is meant to act as a “universal message” that can be sent to every venue a site visitor chooses to contact (through an on click event). I’ve been successful in connecting my custom form elements to my “Form” database wherein I can click a button within a particular repeater container and only that button is activated (using repeater selector type of code).

My dilemma now is figuring out how to input the venue name as a field value within my form database. Your code above has allowed me to set a user input text box element into my repeater and custom indicate that the text will show the custom name of the venue for the container in which it resides (i.e. if the input box is in the repeater container for “Venue X,” then the input box will show Venue X’s name). I’ve then connected this input box to be sent to the form database upon my button click event. All other form input elements, which reside outside of my repeater, are sent to the form database upon button click - however - my venue name (which resides within my repeater) is not being sent as well. Besides not being sent, it is also resetting after I click the button - all the venue names for every repeater is being reset (not just the name in the container I happen to be clicking on).

Do you know what I can do to also have the venue name sent to the form database, along with the other form input elements? I’ve been trying to figure this out for a really long time and I feel like I’ve ALMOST got it, I just can’t figure out how to send the venue name as well. Yesrael (or anyone who has an answer), I would be tremendously grateful for any assistance, thank you!!!

6

You might need to use the Dataset setFieldValue() function for the fields that are not being save to the database.

7

I could accessed to every item of the repeater only setting a handler like this in the normal funcion onClick.

the normal function is:

// This only load the first item from the collection
export function button11_click(event) {
console.log($w(“#dataset1”).getCurrentItem());
}

with the handler $w

//This choose whatever item from the colleption
export function button11_click(event,$w) {
console.log($w(“#dataset1”).getCurrentItem());

}

The trick is just put ----- $w … as the second parameter of the normal onClick funtion.

1 Like
8

@yisrael-wix Can you please tell me how can we retrieve the Image url "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=112 . from this . I want to retrieve 68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg

i am using $w(‘#image’).src;
but unable to retrieve the url .it gave the full url like wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=112 …please help.

9

Hi Yisrael,
Thanks for your helps…
I have a repeater with three static item ( for now). I need to set show more or show less for the text box that is inside each item.
the problem I am having is when I click on the show more button to show the full text of the text box, it shows the full text that is inside the last item and not the full text of the item that has been clicked…I have tried to add even handler inside the on ready function ,didnt work also I have tried to add on ready item and resisted the on click even there, still didnt work…
here is my code
can I have fullText and shortText as an array so when item is clicked the associated index gets passed?..or any other idea?

let fullText;
let shortText;
const shortTextLength = 20;
$w.onReady( function () {
$w(“#repeater1”).forEachItem( ($item, itemData, index) => {
fullText = $item(“#text14”).text;
shortText = fullText.substr(0, shortTextLength) + “…”;
$item(“#text14”).text = shortText;

} );
});

export function button1_click(event, $item) {
if ($item(“#text14”).text === shortText) {
// if currently displaying short text, display the full text
$item(“#text14”).text = fullText;
$item(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$item(“#text14”).text = shortText;
$item(“#button1”).label = “Show more”;
}
}
Please advise…
Ella

10

@erramezani

You have fullText defined as a global varialble. When you go to use it, it will have the last value used since it has no idea which text you are using.

You can use an array to hold all of the full texts. Then whenever needed, either use the full text from the array, or use the full text to create the short text.

I also want to point out the Removal of the $w Parameter from Event Handlers . You should update your code to follow the new way of getting a context selector.

1 Like
11

Hey Yisrael, it works greatly in my site, there is just one problem: I need the form to colect more than one text as I click the button. This way client may select various items at once before submit. right now each time I click in the button it replace the already gotten text with a new one. is there a way to implement it? or did i make something wrong?

Here is my actual code

import wixLocation from 'wix-location'; //for scroll anchor

$w.onReady(function () {    
    $w("#repeater1").onItemReady( ($w, itemData, index) => {
        $w("#text39").text = itemData.TITLE;

        $w("#selecSERV").onClick((event,) => {
            $w("#colector").value = $w("#text39").text;
            $w("#Aform").scrollTo(); // anchor like effect
   });
} );
})
12

@lsmbird Are you trying to retrieve the text from a Repeater Item? You should refer to Removal of the $w Parameter from Event Handlers . You should update your code to follow the new way of getting a context selector.

13

I tried your trick but it didn’t work. I tried replacing $w with $item. It didn’t work either.

14

What trick? Please add your own issue into a new post instead of bumping up an old post. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

15

Old post, but just in case, use the event action of any items integrated to a repeater :

export function whateverElement_onClick(event) {
let $item = $w.at(event.context)
const data = $w("#repeaterWhatever").data;
let clickedItemData = data.find(item => item._id === event.context.itemId)
//console.log(clickedItemData._id) == "MY165ID"}