Getting the displayed value of a button in a repeater

Ask the community
, , ,
1

Design:
On my Homepage, a user will select a kind of DJ, and then be brought to another page displaying a filter of the kind of DJ selected. A repeater of buttons is used to display the collection with a list of DJ types that are available. Their is a lot of DJ Types, but I plan to only display the DJ types that are available.

Use Case example:

  1. User clicks Latin DJ
  2. User is brought to DJ page
  3. DJ page loads a repeater that displays DJ’s with Latin DJs.

Issue:
Using a repeater, I am able to properly display the column (djTypes) from the collection, but I cannot retrieve the value of the button clicked. When I check for the value of the button clicked:

      console.log("Text of button clicked: " + $w('#djsCategoryButton').label + ".");

Expected Results:
“Text of button clicked: Latin DJ”

Actual Results:

770×332 27.8 KB

“Text of button clicked: DJ Type”

My attempts:
I have viewed button API for solutions, but I am not able to retrieve the value of the displayed text from the repeater. Instead I get the value of the button itself. “https://www.wix.com/velo/reference/$w/button”. If I can retrieve the value of the button clicked, then I plan to store that text into a session storage, and get it on the DJ page. However, I cannot get that value from the Homepage.
Using an individual button, I do not have this problem, but using a repeater I am having issues.

Question:
How can I retrieve the value from the button being clicked in the repeater? (or do I need to change my approach to retrieving such information?)
I am open to options and hoping that I do not have to manage a number of individual buttons on the Homepage.

Thank you in advanced.
Truly,
Rex

2

I have written the report as clearly as I could with the relevant information. However, if the post has insufficient information to provide assistance, then please let me know. I would gladly update the post.

3
  1. User clicks Latin DJ
  2. User is brought to DJ page
  3. DJ page loads a repeater that displays DJ’s with Latin DJs.

First question!
Why you need to redirect to another page after have been done a selection?

Why not doing all the processes on the same page, saving uneccessary loading times?

How can I retrieve the value from the button being clicked in the repeater? (or do I need to change my approach to retrieving such information?)
Second: If you want to generate a real customized and good working page, try to go the coding-way and using Wix-Data, or at least you can use the DATASET, but not connected through the PROPERTY-PANEL.

In this case you maybe will have a little bit more of coding work, but the result will be more satisfying.

console.log("Text of button clicked: "+$w('#djsCategoryButton').label+".");

All you will get here is the label of your button.

To solve your issue…you can try first…

$w.onReady(()=>{
	$w('#repeater1').onItemReady(($i, iData, index)=>{
		$i('#djsCategoryButton').onClick(()=>{
			console.log("Clicked-Data: ", iData);
			console.log("INDEX: ", index);
		});
	});
});

But there are of course better options.

4

Thank you for the response.

Response to First Question:
> I am repairing a site that had little to no code, but was designed mostly using the features in Wix. Another page was “designed” for DJs, and it was requested to display the correct info after the type of DJ was selected. However, I will consider avoiding loading a new page to reduce load times.

Response to Second Question:
> Thank you for the advice. I am not very familiar with repeaters, but they are appearing to be a handy feature. I will look into the API for them to have more control over the page.
The “try first” code you provided sparked an idea of utilizing the index value to grab the information I need. I might use this just to get the information I need now, and improve the page/website in the next patch release.

I have much to think about regarding the approach to improving the website.

Thanks again.