Repeater + Code ID

Ask the community
,
1

Hello everyone,
I was wondering if I could get some help with creating a code for my repeater.

I have very, very little experience with coding, the only thing I’ve done is copy and paste a code that lets me have hidden boxes that reveal when I mouse over some text.

Each text has a unique code ID that is tied to a box, for example #text1 reveals #box1, #text2 reveals #box2 and so on.
The code I am using for my hidden box + text combo is:

export function text1_mouseIn ( event ) {
//Add your code for this event here:
$w ( ‘#box1’ ). show ( “fade” , { “duration” : 300 });
}
export function text1_mouseOut ( event ) {
//Add your code for this event here:
$w ( ‘#box1’ ). hide ( “fade” , { “duration” : 300 });
}

The problem I’m having now is I have started to use repeaters and these texts that reveal the boxes are in the repeater. This means they all share the same code ID so now they are all #text1 and this makes it impossible for me to link each text to a different box.

I contacted WiX about this and they linked me to a repeater VELO page as well as 2 others and honestly I just can’t wrap my head around it.

So I was wondering if someone here can please help me in making the code to give unique code ID’s to items in a repeater.

Thanks

2

Where is your full-code?
Where is the mentioned REPEATER-CODE ?

Or did you connect your repeater through dataset and properties panel ?

What is your full-setup ?

3

The full code/repeater-code I have attempted to make is:

$w . onReady (() => {
$w ( “#repeater1” ). onItemReady (( $item , itemdata ) => {

    $w ( "#text1" ). onMouseIn (() => { 
        $w ( "#box1" ). show ( "fade" , { "duration" :  300 }); 
    }) 

    $w ( "#text1" ). onMouseOut (() => { 
        $w ( "#box1" ). hide ( "fade" , { "duration" :  300 }); 
        $w ( '#text1' ). text  =  itemdata.title ; 
    })   

})

})

This is made from an example I received from WiX VELO staff and adding the mousin and mouseout code from the hidden box/text combo.
I did multiple changes to the code to see if I could get it to work but nothing is working.

The example I got from WiX was:

$w . onReady (() => {
$w ( “#repeater6” ). onItemReady (( $item , itemData ) => {

    $item ( "#image1" ). onMouseIn (() => { 
        $item ( "#text1" ). text  =  "Hovered!" 
    }) 

    $item ( "#image1" ). onMouseOut (() => { 
        $item ( "#text1" ). text  =  itemData.title ; 
    }) 

})

})

This example is only to change the text to something else whereas I want a hidden box to appear when I mouseover a text.

I have not done any connecting to the database or properties panel, this is the first I heard of this and I will look in to it after this post.

I made my site through WiX without any use of coding (except for the hidden box + text combo) so my full setup is just the repeater/hidden box/text mouseover code.

4

So now we are coming closer to the solution.

Why you do not do the same, like shown in the Wix-Example?

$item("#image1").onMouseIn(() => { });

Why do you use instead …???

$w("#image1").onMouseIn(() => { });

Your code would look like this one…

$w.onReady(()=>{
	$w("#repeater1').onItemReady(()=>{
		$item("#text1").onMouseIn(() => {           
			$item("#box1").show("fade",{
				"duration": 300
			});     
		});
		
		$item("#text1").onMouseOut(() => {           
			$item("#box1").hide("fade",{
				"duration": 300
			});     
		});
	});
});
5

This is one of the things I have tried but I am getting a problem where $item is not picking up anything.

I have wrote the code exactly how you wrote it with a change to the box name and it doesn’t work.

Here is a screenshot of the code:

The thing is the original hidden box/mouse over code still works but the problem is in repeaters everything shares the same ID as shown below:

794×616 24 KB

Because of this all the texts in the repeater will reveal the same 1 hidden box because that box is tied to #text294.

I have been trying something else too which is another code I copied and pasted from a guide on WiX (with changes to ID names and I changed the onclick to onmousein):

924×695 54.2 KB

I believe this is what I am looking for because it seems to be giving repeated items an individual ID which will allow me to tie hidden boxes to different text.

I added the hidden box/mouse over code at the bottom but its not working, when I highlight export it says the code needs to be at the top but that didn’t change anything.

I am still trying other things out and reading more guides but I’ll be honest I’m struggling.

6

Your code is almost good!

Sorry, i forgot something in my code, but you already have corrected it…

$w.onReady(()=>{
   $w("#repeater1').onItemReady(($item, itemData, index)=>{
     console.log("ID: ", itemData._id);
     console.log("Content: ", itemData.content);
     $item('#text294').text = itemData._id;
   
     $item('#text1').onMouseIn(()=>{
        $item('#box1').show("fade",{"duration":300});
     });
    
     $item('#text1').onMouseOut(()=>{
        $item('#box1").hide("fade",{"duration":300});
     });
   });   
});

All elements which are INSIDE a REPEATER - - > $item !!!
All elements out of REPEATER - - > $w !!!

So in this example…

  1. text1 → INSIDE REPEATER
  2. box1 → INSIDE REPEATER
  3. text294 → INSIDE REPEATER

Use more the CONSOLE, to inspect and understand your own CODE!

REMOVE not needed EXTERN-FUNCTIONS in your code.

And next time please do not USE pics to show your code.
Always show your code as - - - > TEXT.

7

I have done the code as you said with some changes to show the box is not part of the repeater, my code looks like this:

$w . onReady (()=>{
$w ( “#repeater1” ). onItemReady (( $item , itemData , index )=>
{
console . log ( "ID: " , itemData._id );
console . log ( "Content: " , itemData.content );
$item ( “#text294” ). text = itemData._id ;

 $item ( "#text294" ). onMouseIn (()=>{ 
    $w ( "#box32" ). show ( "fade" ,{ "duration" : 300 }); 
 }); 

 $item ( "#text294" ). onMouseOut (()=>{ 
    $w ( "#box32" ). hide ( "fade" ,{ "duration" : 300 }); 
 });

});
});

I only have 1 text in the box which is text294, if I change the name to text1 then I get an underlined error, but this is not working either.

I have been checking elsewhere and found this piece of code on another thread posted by Grace Jansen, but again this is not working:

export function bookButton_click(event) {
// #slotRepeater is the id of my repeater
$w( “#slotRepeater” ).onItemReady(($item, itemData, index) => {
if (event.context.itemId === itemData._id){
// #bookButton is the id of all the buttons but $item maps through each button on the repeater
$item( “#bookButton” ).disable();
}
});
}

This is what I made from this code:

export function text294_mouseIn ( event ){

$w ( “#repeater1” ). onItemReady (( $item , itemData , index ) => {
if ( event.context.itemId === itemData._id ){

  $item ( "#text294" ). onMouseIn (()=>{ 
     $w ( '#box32' ). show ( "fade" ,{ "duration" : 300 }); 
  }); 

  $item ( "#text294" ). onMouseOut (()=>{ 
     $w ( '#box32").hide("fade",{"duration":300}); 
  });

});
});

Again this is not working.

I would like to say as someone who doesn’t code or understand it, this is some great information:

All elements which are INSIDE a REPEATER - - > $item !!!
All elements out of REPEATER - - > $w !!!
// #bookButton is the id of all the buttons but $item maps through each button on the repeater

I do feel like I am getting closer to what I need.

I also want to thank you for your help and assistance in all of this so far Velo-Ninja . Thank you.

8

Run this code and check all CONSOLE-LOGS.
What do you get as RESULTS for each LOG ?

You can put in even more logs to understand your own code and whats going on.

$w.onReady(()=>{console.log("Page ready...");
        //how do you laod the REPEATER-DATA into your REPEATER ? 
        //$w("#repeater1").data = [.....your DATA-OBJECT-HERE...] <------ where is this part in your code? 
        
Your REPEATER only can be ready, after it was feeded with DATA, but i can not see any code, that feeds the repater with data.

AGAIN DATASET-CONFLICT ? 😮

        $w("#repeater1").onItemReady(($item, itemData, index)=>{console.log("Repeater-Items ready...");
            console.log("Item-Data: ", itemData);
            console.log("ID: ", itemData._id);
            console.log("Content: ", itemData.content);
            $item("#text294").text = itemData._id;
        
            $item("#text294").onMouseIn(()=>{
                $w("#box32").show("fade",{"duration":300});
            });
            
            $item("#text294").onMouseOut((event)=>{console.log("Out of "+event.target.id);
                $w("#box32").hide("fade",{"duration":300}); // -----> BOX-32 not inside REPEATER ???
            });

            $item("#bookButton").onClick((event)=>{
                console.log("BookButton INSIDE-REPEATER was clicked!!!");
                console.log("Item-Event-ID: ", event.context.itemId);
                console.log("Item-Data-ID: ", itemData._id);
                if (event.context.itemId === itemData._id){console.log("Check-passed!!!");                    $item("#bookButton").disable();        

                }   
                else {console.log("Check not passed!!!");} 
            });
        });   
    });