Hide & Show Repeater based on OnClick Events

Ask the community
,
1

Would any one be able to help with the below code please?

I have various hide/show elements to a page - the majority of the code works perfectly - I just can’t seem to re-hide the repeater after it has listed the first set of results. I would like the repeater to be hidden once again when a site user click on a #Letter again.

Any help will be fab.

import { local } from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;

$w . onReady ( function (){

$w ( “#Letter1, #Letter2, #Letter3, #Letter4, #Letter5, #Letter6, #Letter7, #Letter8, #Letter9, #Letter10, #Letter11, #Letter12, #Letter13, #Letter14, #Letter15, #Letter16, #Letter17, #Letter18, #Letter19, #Letter20, #Letter21, #Letter22, #Letter23, #Letter24, #Letter25, #Letter26” ). onClick (( event ) => {
$w ( “#repeater1” ). hide
let targetId = event . target . id ;
let id = Number ( targetId . split ( “Letter” )[ 1 ]);
for ( let i = 1 ; i < 27 ; i ++){
if ( i === id ){
$w ( “#Author” + i ). hidden ? $w ( “#Author” + i ). show ():
$w ( “#Author” + i ). hide ();
}
else {
$w ( “#Author” + i ). hide ();
}
}}
)

$w ( “Button” ). onClick ( ( event ) => {
let value = event . target . id ;{
wixData . query ( ‘Repository’ ). contains ( ‘author’ , value )
. find ()
. then ( ( results ) => {
let resultcount = results . totalCount ;
$w ( ‘#repeater1’ ). data = results . items ;
{ if ( $w ( “#repeater1” ). hidden ){
$w ( “#repeater1” ). show ();}

                 } 
                 **if**  ( $w ( "#Letter1, #Letter2, #Letter3, #Letter4, #Letter5, #Letter6, #Letter7, #Letter8, #Letter9, #Letter10, #Letter11, #Letter12, #Letter13, #Letter14, #Letter15, #Letter16, #Letter17, #Letter18, #Letter19, #Letter20, #Letter21, #Letter22, #Letter23, #Letter24, #Letter25, #Letter26" ). onCick (( event ) =>  
                 { $w ( "#repeater1" ). hide (); 
                 } 
                
                 )) 

 })

}}
)
}
)

2

I never have seen such one …

if($w("#Letter1, #Letter2, #Letter3, #Letter4, #Letter5, #Letter6, #Letter7, #Letter8, #Letter9, #Letter10, #Letter11, #Letter12, #Letter13, #Letter14, #Letter15, #Letter16, #Letter17, #Letter18, #Letter19, #Letter20, #Letter21, #Letter22, #Letter23, #Letter24, #Letter25, #Letter26").onCick((event)=>{$w("#repeater1").hide();}

Looks like code from the moon. :roll_eyes::grin:

You did it the first time correct and the second one something gone wrong :sweat_smile:

Your LETTERS must be buttons, right? You as programmer should use a better declaration-technique for your used elements! What do i mean?

If your LETTERS are —> BUTTONS than use something like → btnLetter1, btnLetter2, btnLetter3 and so on…

If your LETTERS are somekind of another element like DropDowns, than declare it like for example the following → ddLetter1, ddLetter2, ddLeter3 and so on…

I hope you understand the systematical way of coding. Why doing this?
Well you as inventor of your CODE, exactly knows what king of ELEMENT you are using, but extern CODERS, like me know, first have to spend 1-5minutes to figure out how to read your code the right way! You have cost me unneccessary 5-min of my life! :stuck_out_tongue_winking_eye: haha joking! But you surely understand what i mean :wink:.

So your solution should be…

$w("Button").onClick((event)=>{console.log(event.target.id); //what do you get here?
   $w("#repeater1").hide();
});

…if you want to hide REPEATER again after a click on one of your LETTER-BUTTONS. I assume your LETTER-BUTTONS are outside of REPEATER.

If you have more buttons on your page, than you will have to define, which buttons are included in the onClick-event exactly…

$w("Button").onClick((event)=>{console.log(event.target.id); ​//what do you get here?
  ​let buttonID = event.target.id; console.log(Button-ID: ", buttonID);
  ​let prefix = "Letter"; console.log("Prefix: ", prefix);
  ​if(buttonID = prefix.substr(0, prefix.length-1)) {console.log("Included button found!)
     ​$w("#repeater1").hide();
  ​}
});

Used method: JavaScript String substr() Method

3

Hi

Sorry for my confusing coding, I’m a beginner and I’m only just finding my way around. Yes the ‘Letters’ are buttons and I have edited them to make this more obvious to someone else.

Thank you for your examples - I really appreciate it. :grinning: I’m slowly understanding it all.

I do have more buttons on my page and I applied the code you suggested, but it is stating " Expected a conditional expression and instead saw an assignment. eslint(no-cond-assign)"

For the line,

if ( buttonID = prefix . substr ( 0 , prefix . length - 1 ))

I have tried a few different expressions, but it creates errors. Are you able to help at all?

4

@beck_1001
Please always show your whole code, this way your helper will be able to understand the whole context. Of course, you do not have to show all your 5000-code-lines, just the relevant one (but complete).

You surely wanted to do something like this…

if(buttonID===prefix.substr(0,prefix.length-1)) {...do something...}
else {...do something else...}

another way would be first to declare it in a variable and than do the comparisson.

let xxx = prefix.substr(0,prefix.length-1)
if(buttonID===xxx) {...do something...}

For you as beginner, the console should become one of your BEST FRIENDS!

let xxx = prefix.substr(0,prefix.length-1); console.log("RESULT: ", xxx);
if(buttonID===xxx) {...do something...}

Try ALWAYS first to CHECK your RESULTS - - > using the CONSOLE!
Doing this way, you also will learn faster the JS-Coding!

If you use google-chrome like me, than you can open the CONSOLE with F-12 on your KEYBOARD and by navigating to → CONSOLE. (i assume the same for Microsoft-Edge)

5

@russian-dima Thank you for the examples, I did manage to resolve it by adding another bracket;

let buttonID = event . target . id ; console . log ( buttonID );
let prefix = “Year” ; console . log ( “Prefix” );
if (( buttonID = prefix . substr ( 0 , prefix . length - 1 )))
{ console . log
$w ( “#repeater1” ). hide ();}})
}

However I’ve added a button to the repeater that connects to the data and should link out to a URL when clicked, but it hides the repeater again - so I’m back to square one! :rofl:

I am working with the console, like you suggested, so hopefully I will be able to figure out what the problem is.

Thanks for all your help.

6

@beck_1001

Yes → this is again a codepart from the …

{console.log$w("#repeater1").hide();}})}

How to use → CONSOLE.LOG ???

Your page-Code → ALWAYS ← should start like this …

$w.onReady(()=>{.......all the rest of your code here.....});

Now you do a console-log to check if your page is already → READY!

$w.onReady(()=>{   console.log("Page has been loaded and is ready to be working with!");   });

CHECK YOUR CONSOLE!

To get better in coding → you will also have to work clear, clean and structured!
Waht does it mean?

The same code again, with a better structure…—> more readable!

$w.onReady(()=>{
    console.log("Page has been loaded and is ready to be working with!"); 
    //....more code here .....  
    //....more code here ..... 
    //....more code here ..... 
    //....more code here ..... 
    //....more code here ..... 
    //....more code here ..... 
    //....more code here ..... 
});

Perhaps in this 1-3-codelines of a very simple code → not that tragic, but working in future witch real complex coding you will remember my suggestion :wink: