How to Hide Elements based off other empty Elements?

Ask the community
,
1

Hi Wix Coders!

I’m trying to create a response on one of my dynamic pages. Hopefully you can help me.

I have a Title box (A) over a Text box (B) (filled by Text Rich data).
Sometimes there is no data for B, therefore A stands over white space depending on the row the dynamic page connects to.
I would like to know how to hide A when B is empty.

I’ve tried to used the “How to Hide a Video Player When There Is No Video to Play” Velo Tutorial: Hiding a Video Player When There Is No Video to Play | Help Center | Wix.com as a template and replacing the video IDs by my text elements, however it’s clearly not working.

I’m sure this requires very simple code, but I’m a real beginner at this.

Does anyone know how to code this action?

Thank you!

1 Like
2

Hi

Could you paste your code?
Your data is connected to a dataset?

3

Hi,

This is going to be embarassing.

$w(“#dynamicDataset”).onReady(() => {
const item = $w(“dynamicDataset”).getCurrentItem();
find (“#text29”)
if (!item.text)
$w(“#group1”).hide();

}

I know I have code missing, but I don’t where to go from there.
#group1 is the element I’m trying to hide when #text29 is empty.
How do I create that reaction?

4

Hi

You were close. This below worked fine for me:

$w("#dataset1").onReady(() => {
 var item = $w("#dataset1").getCurrentItem();
 if (item["mail"] === undefined) $w("#text18").hide();
 else $w("#text18").show() ;
     });
5

Hi,

Thank you for the reply!
I’ve pasted your code and replaced the elements, but I’m getting errors.
My Element IDs:
Dataset = #dynamicDataset
Text box A that varies = #text29
Text box B that should hide when A is empty = #group1

The code:

$w(“#dynamicDataset”).onReady(() => {
var item = $w(“#dynamicDataset”).getCurrentItem();
if (item[“#text29”] === undefined) $w(“#group1”).hide();
else $w(“#group1”).show() ;
});

The error I get should be attached. Reminder, this is the only code on that dynamic page, which might explain the error.

849×138 16.7 KB

6

I’ve rearranged the code by taking out (“#dynamicDataset”) on ligne 1.
However, now #group1 hides on every page regardless of the what happens in #text29.

What is missing?

7

Hi

  1. The code must be within $w.onReady( function () {} (see below full extract from my code)
$w.onReady(function () {
	 $w("#dataset1").onReady(() => {
		  var item = $w("#dataset1").getCurrentItem();
		  if (item["mail"] === undefined) $w("#text18").hide();
		  else $w("#text18").show() ;
  	 });
});
  1. Is #text29 content based on a column in the dataset?
8

Yes #text29 content is based on a column in the dataset.

9

And what is the name of that column in the Collection?

10

It’s called “Festivals”

11

has anyone found a working code exmaple that will hide/collapse an element if there is nothing in the dataset field box?

12

After 24 hours I finally worked out the answer to this!! There you go:

import wixData from 'wix-data';
$w.onReady(function () {
    wixData.query("yourdatabase")
    .isNotEmpty("keyofthecolumnthatcanbeempty")
    .find()
    .then((results) => {
            $w("#yourrepeater").data = results.items;
        });
});

To find the key of the column, click on your database, then click on the name of the column, then “Properties”. You will find Field Key, that’s the one you need to use! :smile:

13

I am trying to do a similar thing, but with a button and a link. If the link in the dataset is empty I would like the button to hide. Currently, all the buttons in my code are hiding even though some of them have links. Would love for anyone to show me what I’m doing wrong here -

import wixData from 'wix-data';
$w.onReady(function () {
     $w("#dataset1").onReady(() => {
 var item = $w("#dataset1").getCurrentItem();
 if (item["linkItemTwo"] === undefined)
        $w("#button5").hide();
 else $w("#button5").show() ;
     });
});

PS - linkItemTwo is the column with the links for the buttons

14

This last code worked like a charm for me!
Just replace the item names, and it should work.

15

This worked for me! I had a container with a repeater on my dynamic title page and here’s what I did:

$w.onReady(function () {

    $w("#theDataSetImPullingFrom").onReady(() => {

            let item = $w("#theDataSetImPullingFrom").getCurrentItem();
            console.log(item)
            
            if(item === null)
                $w("#myContainer").hide();
            else
                $w("#myContainer").show()
                
    })

});
16

Hello, I just posted this in reference to what you’re trying to do and it works!

https://www.wix.com/velo/forum/main/comment/b5aa4075-3acf-4c40-b1c1-37d84f78e82c?postId=5a6f512d01669f0014939928