Conditionally show/hide a button on a repeater control

I have a repeater control linked to a dataset . The dataset is linked to a database. The database has a boolean column ForSale (True/False). I would like to show a “Buy” button on the repeater only if ForSale = True. Can this be done?

Any pointers will be helpful.

Any help will be appreciated , as I have gone through the help articles, but could not find a way.

Hi Yashika,

In the onItemReady function of the repeater, you can show or hide the button. Use the code below as a guide:

$w("#repeater1").onItemReady( ($w, itemData, index) => {
    console.log(itemData.forSale);    // show value of forSale field in developers console
    if(itemData.forSale === "yes") {
        $w("#button1").show();
    }
    else {     // forSale field is "no"
        $w("#button1").hide();
    }
});

I hope this helps.

Yisrael

This worked great. Thank you Yisrael .

What if I want to show a button based on the current user?
I’m using a repeater to display comments made by different users and I added a delete comment button but I want to make it visible only in the comments that the current user made and hide it in the other comments made by the other users. I really want to learn how to do this, your help will be much appreciated.

Thanks a lot Yisrael !

Hi guys, we’re having the same issue on our website but sadly this code doesn’t work on it.
If you can see what we’re doing wrong i our code please let us know - you can read the issue here -

Hope so much that you can figure it out :slight_smile:

I’m trying to do something similar. But I don’t have a repeater on my dynamic item page, at least I don’t think so. I have text boxes that populate with the data fields. I have a field called FieldX. If it equals “X” then I want to show a button; otherwise, I want to hide it. Can someone help me understand what my code would need to look like? And where I need to put it. The page code already has this in it:

$w.onReady( function () {
//TODO: write your page related code here…

});

Thanks.

@peter,

Please repost your question as a new forum post. You should also explain in more detail. Is FieldX a collection field, or is it a text field on the page? Do you have any code?

Yisrael, I already created a new post but it has not yielded a reply that works. I also included the information you request. FieldX is a collection field, but I can also test a textbox on the page that is loaded with the value from that collection field if that’s easier, though I’m not sure how to do that either. The new post is here: https://www.wix.com/code/home/forum/community-discussion/conditionally-show-button-on-dynamic-item-page. It includes my code. I would very much appreciate any help you can give me. Thank you.

Solved, but thanks

Thank you, Yisrael! Your answers always seem to be the ones I need!

First time submitting on a forum … oh jeez. Help! :slight_smile:

I tried to implement this code to show/hide an icon (#Leedicon) based on a true/false state in my “Projects” database (field tag: leed). and I’m getting a weird error.THE ERROR: “There was an error in your script. The element selector function (usually $w) cannot be used before the page is ready” Here’s a link to my sandbox site: https://lian305.wixsite.com/rganderson-r2

My full code below. (Are in question is at bottom.) I think I probably have pasted this code in the wrong order within my existing code (which sorts and filters using my dropdown and search bar. BUT, I’m not sure.

import wixData from "wix-data";

$w.onReady(() => {
    loadCategories();
});

let lastFilterTitle;
let lastFilterCategory;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
 
        filter($w('#iTitle').value, lastFilterCategory);
    }, 500);
}

export function iContinent_change(event, $w) {
    filter(lastFilterTitle, $w('#iContinent').value);
 if('#iContinent'.leed === "yes") {
        $w("#Leedicon").show();
    }
 else {     // forSale field is "no"
        $w("#Leedicon").hide();
    }
}

function filter(title, category) {
 if (lastFilterTitle !== title || lastFilterCategory !== category) {
 let newFilter = wixData.filter();
 if (title)
            newFilter = newFilter.contains('articleTitle', title);
 if (category)
            newFilter = newFilter.contains('category', category);
        $w('#dataset1').setFilter(newFilter);
        lastFilterTitle = title;
        lastFilterCategory = category;
    }
}

function loadCategories() {
    wixData.query('Categories')
        .find()
        .then(res => {
 let options = [{ "value": '', "label": 'ALL' }];
            options.push(...res.items.map(category => {
 return { "value": category.title, "label": category.title };
            }));
            $w('#iContinent').options = options;
        });

}
$w("#repeater1").onItemReady( ($w, itemData, index) => {
    console.log(itemData.leed);    // show value of leed field in developers console
 if(itemData.leed === "yes") {
        $w("#Leedicon").show();
    }
 else {     // forSale field is "no"
        $w("#Leedicon").hide();
    }
});

No takers to help with this one? <3 <3 <3 _/|_ <Those are praying hands?!

Hi, Staci. Put all non-function code inside the onReady() function at the top of your code. Code in that function only runs when the page is ready. Your functions can be defined outside of onReady() as you now have it; they will be called from code you write in the onReady() function.

can you tell me how did you solved that?

I am trying to do about the same thing.  I have a button(button4) on a repeater that I want to hide and show based on a boolean field in a dataset.  the field is flowback (true/false).  Here is the code

export function repeater1_itemReady($item, itemData, index) {
$w(“#repeater1”).onItemReady($w, itemData, index) => {console.log(itemData.Flowback); //show value of flowback in developers console
if(itemData.Flowback === “true”) {$w(“#button4”).show();}
else {$w(“#button4”).hide();}

});

export function repeater1_itemReady($item, itemData, index) {
//Add your code for this event here:
}
i get the following error when previewing. any help would be appreciated. Yes I’m new at this
Error parsing web-module ‘public/pages/qiytc.js’: Unexpected token (4:51) while parsing file: public/pages/qiytc.js
thank you

This is an old thread. Please post your question in a new one.

Old thread. I’m closing it.