Conditionally show button on dynamic item page

In a similar post that no longer seems active (https://www.wix.com/code/home/forum/community-discussion/conditionally-show-hide-a-button-on-a-repeater-control) there is code for how to do this on a repeater control. Not sure what that is but I don’t believe there is one on my page. I have a dynamic item page containing textboxes linked to the dataset. The dataset has a FieldX. If FieldX = “abc” I want the button to show; otherwise, I want it hidden. Can someone please show me what the code needs to look like? I’ve been unable to adapt the code at the above link.

Thanks!

Hi Peter

When you load a dynamic page your page is configured to use data from a specific item in the dataset collection.

Once you have loaded the dataset you should find that the dataset currentItem property is loaded with the record for the page.

So you should find that the following code will do what you want:

$w.onReady(() => {
    let activeDynamicItem = $w('#<dataset-name>').currentItem();
    let fieldX = activeDynamicItem['FieldX'];
    if (fieldX && fieldX ==="abc") {
        $('#button').show();
    } else {
        $('#button').hide();
    }
});

You should familiarize yourself with the wix-dataset api which will help you understand this a little more.

Cheers
Steve

Thank you!

I got an error on currentItem() so I changed it to getCurrentItem(). Also put w’s after the $'s in the if and replaced the name of the dataset with its ID property value, the name of the button. I can’t get the button to appear.

I am noticing that your “onReady” thing is different from mine. I put mine here, did I put it in the wrong place, maybe?:

$w.onReady( function () {
let activeDynamicItem = $w(“#dynamicDataset”).getCurrentItem();
let fieldX = activeDynamicItem[‘Title’];
if (fieldX && fieldX ===“OPEN WATER DIVER”) {
$w(‘#btnEquipment’).show();
} else {
$w(‘#btnEquipment’).hide();
}});

Thanks again for your help Steve!

I also tried the “container” just like yours like this and it still doesn’t show the button:

$w.onReady( function () {
});

$w.onReady(() => {
let activeDynamicItem = $w(“#dynamicDataset”).getCurrentItem();
let fieldX = activeDynamicItem[‘Title’];
if (fieldX && fieldX ===“OPEN WATER DIVER”) {
$w(‘#btnEquipment’).show();
} else {
$w(‘#btnEquipment’).hide();
}});

and also like this after reading the link you sent:

$w.onReady( function () {
$w.onReady(() => {
let activeDynamicItem = $w(“#dynamicDataset”).getCurrentItem();
let fieldX = activeDynamicItem[‘Title’];
if (fieldX && fieldX ===“OPEN WATER DIVER”) {
$w(‘#btnEquipment’).show();
} else {
$w(‘#btnEquipment’).hide();
}});
});

Hi Peter

Sorry for the typo. I had just finished posting to another post where the syntax for wix-users is currentItem.
You probably need to grab the dataset info in the dataset’s onReady function. It’s likely that the dataset is still getting itself sorted out when you try to get the current item ( getCurrentItem() )

Take a look at this documentation re:dataset

Particularly the text around onReady

and getCurrentItem
wix-dataset - Velo API Reference - Wix.com

Which shows you how to do this.

Also you might want to consider using console.log() to print out values of variables and elements as you debug these types of problems. That’s a good way of trying to ascertaining what’s broken.

Either way, its good to understand the apis by reading the manual :wink:

Cheers

Thanks, Steve! No worries on the typo. My reason for pointing it out was mainly for other folks who might stumble upon this thread. I’ll try what you just suggested. Thanks for pointing me in the right direction!

I’m at a loss with this. I’m hoping someone out there has done this exact thing before and can tell me what I’m doing wrong. My dynamic page is as the system (Wix) created it, nothing fancy. Here’s the code I now have after reading Steve’s links. I don’t know what else to try:

$w.onReady( function () {
$w.onReady(() => {
$w(“#dynamicDataset”).onReady(() => {
let activeDynamicItem = $w(“#dynamicDataset”).getCurrentItem();
let fieldX = activeDynamicItem[“Title”];
if (fieldX && fieldX ===“OPEN WATER DIVER”) {
$w(“#btnEquipment”).show();
} else {
$w(“#btnEquipment”).hide();
}});
});
});

Peter

You don’t need two $w.onReady() calls. I’m not sure what effect an onReady in an onReady will have but it probably isn’t a good one ;-).

function() { } is the same as () => { }
see ES6 In Depth: Arrow functions - Mozilla Hacks - the Web developer blog

My recommendation would be to use console.log() to print out the value of activeDynamicItem and activeDynamic[‘Title’]. I am going to guess one of these (probably the property value with ‘Title’) in null.

Note that in the database collection there are two key names to consider. One is the key’s display name, the other is the actual key name you need to use when accessing the data in code. Since the key you are using is ’ T itle’ I am willing to bet that you should be using ’ t itle’ with lowercase ‘t’.

You can verify this in your Database Collection by selecting the field options…


and then manage the field properties.

The other thing I would do is check the browser console for any error messages that might tell you what is happening.

You may have a privileges problem with the database collection or dataset leading to a read error?

Hope you sort it out

YES!!! It was the name! Thanks, Steve. Now there’s another little problem. The button shows up but it’s disabled (the mouse pointer becomes an i-beam on hover and the color of the button is as selected in the Disabled properties of the button. Why is it disabled and how do I enable it?

Thank you so much for your help getting me this far!

Oddly, a textbox with a link works, so, I have a solution! If you have any insight on the button, I’d appreciate it, but it’s no longer critical. Thanks to you Steve.

Hi Peter:

Not knowing how you configure the link info on the button I can’t really say. If you have used the editor to bind the button to the applicable dataset item then make sure you have bound the correct fields. It’s likely that a bad link value will leave the button disabled.

If you set up the button in code then make sure the data you assign to the link field are valid values. Check your browser console for any error messages. These might help too.

Cheers
Steve

Hello would you be able to help me with my code. i am trying to hide a button when there is no url present. my code either hides it on every dynamic page or shows it on all. I tried a few variations i’ve found on the forums. Nothing is working for me however.

What if the field you’re drawing from depends on whether a document is there or not, rather than specific text? What would “abc” be if you’re checking to see whether a document has been uploaded or not?