Conditionally Hide/Show Button on Repeater

Ask the community
,
1

I know there have been a million posts on this, and I’ve tried them all. I’ve got a button in a repeater that I need to hide if there’s no value to it. The field is called “series”

export function repeater1_itemReady($item, itemData, index) {
if(itemData.series === "") {
$w("#button5").hide();
}
else {     
$w("#button5").show();
}
}

That doesn’t work at all. I’m a novice here. If someone could lend some advice I’d be very grateful!

2

Hi Dan,

There have been quite a few posts on this, but to reiterate, to work with an element in an individual row of a repeater, you need to refer to the element with the selector function $item instead of the typical $w.

export function repeater1_itemReady($item, itemData, index) {
    if(itemData.series === "") {
        $item("#button5").hide();
    } else {     
        $item("#button5").show();
    }
}
3

Hi @tony-brunsman - I appreciate your reply! So I had tried the above, and it just creates a blank button if I use that code.

4

@dan38194 Could you upload an image of what it looks like when the button is visible?

5

Sure! @tony-brunsman - see below.

Also, here is the only code I’ve got on the page right now. Thanks again!

export function repeater1_itemReady($item, itemData, index) {
if(itemData.series === "") {
$item("#button5").hide();
} else {
$item("#button5").show();
}
}
import wixWindow from 'wix-window'; //import Wix libary wixWindow
$w.onReady(function () {
let isMobile = wixWindow.formFactor.match('Mobile') //use libary to check is user using mobile
if(isMobile){
$w('#table1').show()  // if user using mobile, the element show
}
})

4744×1600 675 KB

6

Dan, the import statements and onReady should be at the top of the page and not inside any particular function. After making that change, let’s see if you continue to have the “blank button” behavior.

import wixWindow from 'wix-window'; 
$w.onReady(function () {
    let isMobile = wixWindow.formFactor.match('Mobile')
    if(isMobile){
        $w('#table1').show()  
    }
})
export function repeater1_itemReady($item, itemData, index) {
    if(itemData.series === "") {
        $item("#button5").hide();
    } else {
        $item("#button5").show();
    }
}
7

Hi @tony-brunsman - thanks again for your time. Unfortunately it’s the same result. It’s almost like the code isn’t doing anything.

Question - the field “series” is a reference field, referencing a different content collection.

Thanks again.

2936×1114 294 KB

3328×1694 490 KB

8

Since it is a reference field, you need to specify which field in the referenced collection that you are checking the “emptyness” of. An object that contains all of the field values is what itemData.series returns. So, if the field in the referenced table is named “series”, you would refer to it as itemData.series.series.

export function repeater1_itemReady($item, itemData, index) {
    if(itemData.series.series === "") {
        $item("#button5").hide();
    } else {
        $item("#button5").show();
    }
}
9

Hi @tony-brunsman - thanks for this. I tried the above and still, same issue. I also tried events.series and series.events (name of referenced collection) and same issue…kind of lost here. :confused:

10

It might help to put a console.log statement in there so you can really see what you’re dealing with.

export function repeater1_itemReady($item, itemData, index) {
  console.log(itemData.series);
    if(itemData.series.series === "") {
        $item("#button5").hide();
    } else {
        $item("#button5").show();
    }
}
11

I’m trying the same thing. I have buttons/icons for in a repeater: Website, Facebook, Insta, LinkedIn. All connected to data. Not all people will have all of these elements, so I want to hide if no value in data. I am reading through this an not sure if any of the above worked, or will work for my repeater. I’ve tried the first two.