RESOLVED apply a different code for each container .onClick in a repeater

[weneedcontis]

Hello, Im Antoine and I try to create a cool site for my service society.
I’m french, 30 yo, no develloper.

On one page I have 3 repeaters.

The container of each repeater consists of an image and a title.
Repeater 1 is visible and the other 2 are hidden.
I wish that:

• when the visitor clicks on the container 1 of the repeater 1, the repeater 2 is displayed and the 1 is hidden.

• when the visitor clicks on the container 2 of the repeater 1, the repeater 3 is displayed and the 1 is hidden.

---

This code is not good because he affect all containers.

export function container1_click(event) {
$w(‘#group1’).hide()
$w(‘#group2’).show()
}

---

Thank’s for your help.

#repeater #container #Item1 #Item2

[J.D]

I guess you meant to say: "when the visitor clicks on the container 2 of the repeater 1, the repeater 3 is displayed and the 2 is hidden. "
Anyway I’m not sure if you meant that clicking the any container in repeater1 will display repeater 2, or just clicking the first item in repeater1 (index=0) will display repeater 2.
please clarify.

[weneedcontis]

There will be on the page a parent repeater and 6 other children repeaters(hidden at loading). The goal is that when a visitor clicks on a container (Item1, Item2 …) it hides the parent repeater and displays the child repeater.

[skmedia]

@weneedcontis Je vous dirai qu’en avoir six fera une grande difference en chargeant la page. Ca serait mieux de faire vos connexions avec WixCode pour que ca peut charger assez vite.

En fait, vous avez juste besoin de deux repeaters, l’un a gauche connecte en utilisant le GUI et l’autre connecte avec code dynamique. Ca dependrait du numero de databases que vous voulez connecter.

[weneedcontis]

@skmedia , ok je vais essayer de me lancer dans cette mission.
Merci pour ce conseil.

[weneedcontis]

I searched all day, very complicated to find the info, I regret not having studied computer science at school.
Please, can you give me at least the beginning of the code?

---

So now I have
On one page 2 repeaters.
The first is displayed on loading and the second hidden.
The first repeater is not connected to a database, it has 2 fields: a title, an image.
The second repeater is connected to a database that contains 3 fields: a title, an image, a category.
I am looking for the method to:
-a visitor clicks on image1 of repeater1, then data of the “delivery” category are displayed in repeater 2.
-a visitor clicks on image 2 of repeater 1, then the data corresponding to the “transport” category are displayed in repeater 2

I try this but it’s not the good result :

---

export function container1_click(event) {
$w(“#repeater1”).forItems( [“item1”], ($item, itemData, index) => {

$w('#group1').hide() 
 $w('#group2').show() 

});
}

[skmedia]

Si le seconde repeater est juste connecte a un dataset, voici:

$w('#repeater1').onItemReady( ($item, itemData, index) {
    let thisCategory = $item('#title').text;
    $item('#title').onClick(() => {
        $w('#repeater2Dataset').setFilter(wixData.filter().eq('category', thisCategory));
    } );
} );

[weneedcontis]

@skmedia
Thank you for opening the road to success, unfortunately the code does not work … I continue my search

---

import wixData from ‘wix-data’;

$w.onReady( function () {

$w(‘#repeater1’).onItemReady( ($item, itemData, index) => {
let thisCategorie = $item(‘#title’).text;
$item(‘#title’).onClick(() => {
$w(‘#dataset1’).setFilter(wixData.filter()
.eq( ‘categorie’, thisCategorie)
) ;
} ) ;
} ) ;
} ) ;

[skmedia]

@weneedcontis It should work as long as a couple other things are true:

1. You have to go to your repeater 1’s properties panel and check onItemReady.
2. You have to make sure it says onItemReady in the properties panel text, and not onItemReady_1.
3. You need to make sure if the title isn’t exactly the same letter for letter in your title text as it is in your categorie field, that you play with the code a bit. Check out the wixFilter API.
4. Last, you may have to refresh the dataset1 after the filter is set.

I think that should do it!

[weneedcontis]

@skmedia

• my properties pannel says: repeater1_itemReady
• dataset1 is refreshed (synchronized)
• dataset1 is reading/writing
• the titles are the same in the dataset1 and in the repeater1 (in lower case)

---

• do I have to connect the dataset1 to repeater1?
• should I set up permissions for the collection?
• the key of the category field is “categorie” and his type is “text”, it is ok?

Here is the code that I wrote and that does not work,
But I think I’m not far from the goal, I feel it deep in my processor →

import wixData from 'wix-data';

$w.onReady(function () {

$w('#repeater1').onItemReady( ($item, itemData, index) => {
 let thisCategorie = $item('#title').text;
    $item('#title').onClick(() => {
        $w('#dataset1').setFilter(wixData.filter()
        .eq( 'categorie', thisCategorie)
      ) ;
} ) ;
} ) ;
} ) ;

[skmedia]

@weneedcontis Dataset1 should only be connected to your 2nd repeater, nothing else. Permissions should be read only. If they are both all lowercase it will work, otherwise you can add some sort of collapsed text to your 1st repeater with the exact same styling and use it as reference instead. If your collection field has more than one category per item, you need .contains instead of .eq. Try this:

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#dataset1').onReady(()=>{
        $w('#repeater1').onItemReady( ($item, itemData, index) => {
             let thisCategorie = $item('#title').text;
             $item('#title').onClick(() => {
                 $w('#dataset1').setFilter(wixData.filter().contains('categorie', thisCategorie));
                 $w('#dataset1').refresh();
             } ) ;
        } ) ;
    } );
} ) ;

[weneedcontis]

It doesn’t work.
Yes the collection field has more than one category per item.
In the code we filter the dataset1 data but it is not mentioned repeater2, normal?

Now in my editor, there is only one category that appears in the repeater2

We agree that I do not have to replace ‘#title’ in the code by the title of each category ?

 
import wixData from 'wix-data';

$w.onReady(function () {
    $w('#dataset1').onReady(() => {
        $w('#repeater1').onItemReady(($item, itemData, index) => {
 let thisCategorie = $item('#title').text;
            $item('#title').onClick(() => {
                $w('#dataset1').setFilter(wixData.filter().contains('categorie', thisCategorie));
                $w('#dataset1').refresh();
            });
        });
    });
});

[skmedia]

Voici mon email.

It should make things faster and easier haha.

[weneedcontis]

RESOLVED

Bonjour, voici la solution à mon problème, résolu grâce à David.

import {session} from 'wix-storage';
import wixData from 'wix-data';


$w.onReady(function () {
var secteur = $w('#page1').title

session.setItem("filtresecteur", secteur);
console.log (session.getItem("filtresecteur"))

});


$w.onReady(function () {
    $w('#dataset1').onReady(() => {
        $w('#repeater1').onItemReady(($item, itemData, index) => {
 let thisCategorie = itemData.title;
            $item('#image1').onClick(() => {
                $w('#dataset1').setFilter(wixData.filter().eq('categorie', thisCategorie));
            });
        });
    });
});


export function vectorImage1_click(event) {
    $w('#dataset1').setFilter(wixData.filter().eq('firstView', true));
}

[programacionbulldogs]

¿No hubiera sido más fácil con un cuadro multiestados?