Completely hide button on repeater when database field is empty?

Ask the community
,
1

I have a “special title” field in my database that shows up as a button on my repeater:

1280×442 106 KB

1280×571 279 KB

I want the button to be completely hidden when the field is empty.
I tried using code from this comment: https://www.wix.com/velo/forum/main/comment/5ea5f5e837a99b0051c1e278r
But this only hides the text and not the green bubble.

1280×625 280 KB

How can I fully hide the button?

2

You have to find the green bubble element and apply .hide() method if specialTitle is empty.

if (specialTitle === "") {
    $w("#greenBubble").hide()
}
3

Hi Bruno,

How do I resolve “specialTitle is not defined”?

and where do I find the green bubble, is it in inspect element? or is it “#button3”

958×192 30.6 KB

I have essentially no knowledge about html.

Thanks

Erica

4

Hi there :wave:t2: I do something similar on my site. This is the code I use, hopefully it can help you out. Just change the element IDs to match yours. (i.e. “#button3” would replace “#yourElement” , and the same for your dataset ID and repeater ID)
Good luck!

$w.onReady(function () {
    $w('#yourDataset').onReady(() => {
        $w("#yourRepeater").onItemReady(($item, itemData) => {
            let sTitle = itemData.specialTitle;
            if (sTitle === "" || sTitle === null || sTitle === undefined) {
                $item("#yourElement").hide();
            } else {
                $item("#yourElement").show();
            }
        });
    });
})
5

Thank you! This worked perfectly

6

@thousandericas in the image you sent, $w(“#button3”) appears to be the element you need to manipulate.

I imagine that you are using manual dataset connection to the repeater, so to hide the button without having to get the specialTitle you can get the label of this button and hide it if it is empty.

But, you are going to need some more advanced Wix/JavaScript knowledge.

$w("#repeater1").forEachItem(($item, itemData) => {
    if ($item("#button3").label === "") { //check if it is empty
        $item("#button3").hide()
    } else{
        $item("#button3").show()
    }
})

This is going to loop through your repeater and check if that element has an empty label or not and then hide it.