How to call from Dynamic Dataset onClick

Ask the community
,
1

Hi,

I want to have a series of shapes (say circle1 , circle2 , circle3 , etc.), and I want them to show a box onClick . However, I would like to not have to create a seperate box for each one. Therefore, I would like to connect it so that if the circle10 is clicked, for example, then I want to show the circle10 (or whatever) item in the dataset — a specific item in my dataset.

I know this is tall order and I could just be making stuff up, but thanks for any help you can provide!!

2

Hi :raised_hand_with_fingers_splayed:

You can create a dynamic onClick() event handler, let’s say you have couple of shapes (circles) that you want to show their box when they’re clicked, for example, when circle1 is clicked, show box1 , and so on, if that’s what you want, then do the following.

For elements that share similar IDs and behavior, you can create dynamic event handlers.

let elementsNum = 5 // Or whatever their number is

for (let i = 1; i <= elementsNum; i++) {
    $w(`#circle${i}`).onClick( (event) => {
        $w(`#box${i}`).show();
    })
}

This will create an onClick() event handler for each of your elements (5), or more without making the code so long and hard to debug.

Just remember, elementsNum is the number of elements that share similar IDs and behavior, like (circle1, circle2, etc…) and (box1, box2, box3, etc…).

Hope that helped~!
Ahmad

3

Hello ClimaActivist,

i am not sure, but i think that this site has exactly the behaviour, what you are searching for.
https://russian-dima.wixsite.com/meinewebsite/home-1

function init() {

  $w('#table1').onRowSelect(event => {

 const currentRowIndex = event.rowIndex;
    console.log(currentRowIndex);
 
 const item = $w('#dataset1').getCurrentItem();
 const URL = item.url;
    console.log(URL);

 const myURL = item["link-tutorials-title"];
 const contentLink1 = item["link-tutorials-title"];

    console.log(myURL);
    $w('#BTNgo').link = myURL;
  })
}


export function viewresultsbutton_click(event, $w) {}
 
export function BTNgo_click(event) {
    console.log($w('#dataset1').getCurrentItem().contentLink1)
 let visitCounter = $w('#dataset1').getCurrentItem().views

 if (visitCounter ==0) {visitCounter = 1}
 else {visitCounter = visitCounter+1}

    $w("#dataset1").setFieldValue("views", visitCounter)
    $w("#dataset1").save()
 
    .then(()=>{
        wixLocation.to($w('#dataset1').getCurrentItem().contentLink1)
        console.log(visitCounter)
    })
}

export function BOXlink1_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink1), wixLocation.to($w('#dataset1').getCurrentItem().contentLink1)}
export function BOXlink2_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink2), wixLocation.to($w('#dataset1').getCurrentItem().contentLink2)}
export function BOXlink3_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink3), wixLocation.to($w('#dataset1').getCurrentItem().contentLink3)}
export function BOXlink4_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink4), wixLocation.to($w('#dataset1').getCurrentItem().contentLink4)}
export function BOXlink5_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink5), wixLocation.to($w('#dataset1').getCurrentItem().contentLink5)}

733×319 12.8 KB

938×709 23.5 KB

4

Thank you! That doesn’t connect to a dynamic dataset, but it’s a great workaround.

5

I don’t understand.

Are you using repeater to show these " boxes " when clicking on a circle?
If so, are they (the circle and the box) in the same container in the repeater?

6

Using Ahmad’s answer, I think I can combine that with the setCurrentItemIndex function to work with my need. Thank you everyone!

7

Glad that my answer was helpful.

You can provide us with more information about what you’re trying to do, and we’ll help you as much as we can.

8

No, sorry I was being confusing. I figured out part of it myself, and yours was very helpful!

9

If I can ask one more question, how can I change the sort order of my dataset so that it DOES affect the content in the editor/on my live site? It says: " Sorting and filtering here will not affect the content on your live site." But I want it to!

10

What do you mean the content on the editor? Do you mean the Sandbox databse ?

Sorting your database in the Sandbox or Live database does NOT affect the sort of the database on the live website, you need to sort the filter() or the query each and every time you want to query a collection or filter a dataset.

11

How do you alphabetize the items in code? That’s the only element I need now

12

Using ascending( ) & descending( ) .

13

Thank you, but I’m a bit confused from the website. What do I put in the parenthesis so that the lowest number comes first?

14

Actually, I figured it out. I’ll post the code. Thanks everyone for their help!!

15

I used Ahmad’s answers plus my own research. Thanks everyone!

import wixLocation from "wix-location";
import wixData from 'wix-data';

$w.onReady(function () {
 let elementsNum = 6
    $w("#dataset1").onReady( () => {
        for (let i = 1; i <= elementsNum; i++) {
        $w(`#vectorImage${i}`).onClick( (event) => {
       $w("#dataset1").setCurrentItemIndex(elementsNum-i)
            })
        }
    } );
});
16

Thanks for posting your working code, hopefully helps others with the same issue. :+1: