JavaScript needed to not display a button, when CMS linkinfo is blank

Ken_Simms · February 14, 2025, 4:14pm

Question:
If a CMS field (link info) is blank, do not display the button (button4) on the webpage.

Product:
Wix Editor in Dev mode

What are you trying to achieve:
Don’t display a button when there is no data in the related CMS field. I have a list of companies in a repeater on my webpage, followed by a button that takes the user to a URL that’s stored in the CMS. But some rows in CMS do not have a URL. When they don’t have a URL, I want to hide the button for that row. It is my understanding a simple JavaScript could handle this situation.

What have you already tried:
My background is a Server admin. It’s many years since I did any coding. I did try this code sample example in a forum post but didn’t work.
$w.onReady(function () {
$w(‘#dataset1’).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData) => {
let sTitle = currentItem.urlField;
if (sTitle === “” || sTitle === null || sTitle === undefined) {
$item(“#myButton”).hide();
} else {
$item(“#myButton”).show();
}
});
});
})

Additional information:
See the attachments. 1) of the webpage and 2) of the CMS data. Note the first row in CMS has no link info.

onemoretime · February 14, 2025, 5:38pm

Hi, @Ken_Simms !!

For now, please try modifying it like this.

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        $w("#repeater1").onItemReady(($item, itemData) => {
            let url = itemData.urlField;
            if (!url) {
                $item("#myButton").hide();
            } else {
                $item("#myButton").show();
            }
        });
    });
});

Ken_Simms · February 14, 2025, 8:28pm

Question @onemoretime: Linkinfo in CMS is where the URL could be blank. How do I specify linkinfo where .onItemReady is in this code?

onemoretime · February 15, 2025, 2:48am

Hi, @Ken_Simms !!

For now, try it out like this and experiment with it! I think you might need to make some adjustments if you’re setting a link on a text element.

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        $w("#repeater1").onItemReady(($item, itemData) => {
            let lookinfoUrl = itemData.lookinfo;
            if (!lookinfoUrl) {
                $item("#someButton").hide();
            } else {
                $item("#someButton").link = lookinfoUrl;
                $item("#someButton").show();
            }
        });
    });
});

Ken_Simms · February 15, 2025, 2:54pm

This worked! Thank you @onemoretime for the assist. Now I need to apply similar code to other link buttons and future repeaters. I’ll be back if I have more questions.

$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData) => {
let lookinfoUrl = itemData.forumName;
if (!lookinfoUrl) {
$item(“#button4”).hide();
} else {
$item(“#button4”).link = lookinfoUrl;
$item(“#button4”).show();
}
});
});
});

codequeen · February 16, 2025, 7:57am

onemoretime:

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        $w("#repeater1").onItemReady(($item, itemData) => {
            let lookinfoUrl = itemData.lookinfo;
            if (!lookinfoUrl) {
                $item("#someButton").hide();
            } else {
                $item("#someButton").link = lookinfoUrl;
                $item("#someButton").show();
            }
        });
    });
});

Sorry but that is going to cause “blinking” on the page, and there is no reason why you wouldn’t link the button directly via the dataset connector.

You need to link the button and then set it to hidden on load via the code panel.

Afterwards , you only need minimal code ….

$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData) => {
if (itemData.lookinfo) {
$item(“#someButton”).show();
}
});
});
});

This prevents the blinking effect, by reversing the logic.

Ken_Simms · February 16, 2025, 1:39pm

@codequeen I don’t understand. My testing did not show any ‘blinking’ at all.

My button is linked to the dataset connector as a type linkinfo containing the URL to display on a new page.

But to your point of setting it to hidden and I’m all for less code, how do you set the button to hidden?

codequeen · February 19, 2025, 6:19am

When a visitor has a slow internet connection, laggy browser or the page delays loading for whatever reason—— the elements will be visible on the page before they are hidden via code.

If you open up your code panel, bottom right corner will show the element panel after you click on your element on the page. Within that section you will see a checkbox that says “hidden”. Check that box. This make the element hidden before the page loads.

Ken_Simms · February 22, 2025, 6:17pm

I tried your simplified code, but there is a problem. All buttons are hidden now. It has to be something wrong in the code.

$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData) => {
if (itemData.forumName) {
$item(“#button4”).show();
}
});
});

codequeen · February 23, 2025, 1:23am

Did you mark the button hidden? Or did you mark the button as collapsed?

You do not need both, but the button setting you selected matters because it needs to be paired with the correct code.

hidden > show
collapsed > expand

You cannot have collapsed checkbox selected and use the word “show” in the code because they are not the correct pair.

The code is essentially written correctly, but the settings can make it “be wrong”.

Ken_Simms · February 23, 2025, 4:26pm

I marked it hidden like you suggested. Enabled is selected too.

codequeen · February 23, 2025, 8:13pm

Ok, is forumName the correct fieldkey ID for the column in the database? Does that column have any data in it? Are you testing on the live website or inside of the editor Preview?

Ken_Simms · February 23, 2025, 10:31pm

Yes, forumName is the Field ID. That’s the field I am keying on to show or hide the button. So when this field is blank, I hide the button. And I show the button when a URL is present. I’m testing in the editor Preview. I did publish the logic shown below and that works also.

The logic below worked properly but you stepped in a said it would cause ‘blinking’ on a slow connection. And I also liked the idea of simpler code.

$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData) => {
let lookinfoUrl = itemData.lookinfo;
if (!lookinfoUrl) {
$item(“#someButton”).hide();
} else {
$item(“#someButton”).link = lookinfoUrl;
$item(“#someButton”).show();
}
});
});
});

codequeen · February 24, 2025, 1:28am

Ok but this code is using a different field key .

So is the URL in lookinfo or forumName?

Ken_Simms · February 24, 2025, 3:06am

I’m not sure I understand how ‘lookinfo’ works in this logic. Remember, I’m a System admin, not a programmer (anymore).

codequeen · February 24, 2025, 3:40am

You said the other code worked for you, but it actually uses a fieldkey called lookinfo.

Then when you rewrote the code you used forumName as the fieldkey.

So —— some column in your database that has “lookinfo” actually has data in it and the other one does not.

Ken_Simms · February 24, 2025, 3:58pm

I checked everything in my CMS content and there are no field ids called lookinfo.

forumName is the field I’m keying off of to display or hide the button.

Knowing that forumName is the field id to use, how would you write (or correct) your simplified code? I assume you are saying the statement ‘if (itemData.forumName)’ is incorrect?

$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData) => {
if (itemData.forumName) {
$item(“#button4”).show();
}
});
});

codequeen · February 25, 2025, 1:48am

Not sure how I can help. I can’t see your settings, your data, your elements or your code.

The code is correct.

The previous code should not have worked if there wasn’t a field with that ID.

Ken_Simms · February 25, 2025, 1:46pm

In our last conversation, you questioned whether forumName is the correct field id. It is.

So I’m asking a code question. In your code, do I replace the statement:
let lookinfoUrl = itemData.lookinfo;
with
let lookinfoUrl = itemData.forumName;

My question is related to the code you provided
$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData) => {
if (itemData.forumName) {
$item(“#button4”).show();
}
});
});

Thanks for your help.

codequeen · February 25, 2025, 3:03pm

Honestly, it would be easier if I was looking at your editor or screenshots because that piece of code is written correct. It’s a simple hide and show. The simplest and most popular code to use in Wix.

(It is difficult to troubleshoot code without seeing everything else in the code panel, on the page, in the settings, in the data.)

I have covered as much as I can guess without being visually present.

These are the most common things to look for …. but let me expand on those

Is the fieldkey correct
Is there any code written before or after this code, if yes, is it merged correctly
Are there multiple onReady
Is the correct dataset being referenced
Is the element set to be hidden on load
Is the element attached to the repeater
Is the correct element being referenced
Is hide/show being used vs collapse/show
Is collapse/expand being used vs hide/expand
Does the code work with other elements but not this one
Does the code work with other fields but not this one
Does the code work on other pages but not this one
Are there any excess spaces, dashes or characters in the code underlined in yellow or red

(I can’t think of any more guesses)

Topic		Replies	Views
How do I hide a button in a repeater's item when its dB field is empty? Ask the community code , design , question	9	696	December 22, 2020
Show/hide a button if there is a link Ask the community code , question	4	669	May 31, 2021
If field is empty (null) in dataset - How to hide a button in a repeater Ask the community code , question	5	1720	August 22, 2020
Hide Button on Dynamic Page When Field Is Empty Ask the community code , question	4	2233	August 8, 2022
How to hide button if database field is empty Ask the community code , question	6	2230	March 22, 2023

JavaScript needed to not display a button, when CMS linkinfo is blank

Related topics