Collapse/Expand elements in a dynamic page if a field in a database is empty

Ask the community
,
1

Why is the below code not working ?

$w("#dynamicDataset").onReady( () => {
 let item = $w("#dynamicDataset").getCurrentItem();

 if (!item.flyer) {
            $w("#image14").collapse();//set height to 0
        } else {
            $w("#image14").show() ;
        }

    } );
2

It’s because .show() is not the opposite of collapse().
You have to decide either use hide-show or collapse-expand
The difference is that a hidden element occupies place whereas a collapsed element does not.

3

Hi J.D.,
I understand that part, but even when the "collapse()’ statement is getting executed it does not collapse the element. I verified using debugger that the code is getting executed with no result.

4

@singhsmanoj so there’s not enough info to answer that. It’s might be an issue with you collection permission or a bug on Wix side or something else.

5

@jonatandor35 I am on a dynamic Item page where I want to collapse an image element if it’s not populated in db so that’s why onReady() I check for that field from DB and then collapse it. So when I am running this code in debugger to makes sure that my logic is correct…it does seem so, as I can see the right code getting executed depending on what’s in DB …but nothing happens. Not sure what else to do in this case …do you have any other suggestions ? or is there a way I can share the page with code with you ?

6

@J.D. …any suggestions ?

7

Hi there :wave:t2: I do a similar thing on my site. This is the working code that I use, perhaps it can help you.

import wixData from 'wix-data';

$w.onReady(function () {
    $w("#ncGrade2Data").onReady(() => {
 var item = $w("#ncGrade2Data").getCurrentItem();
 if (item["extension"] === undefined) $w("#extensionStrip").collapse();
 else $w("#extensionStrip").expand();
    });
});

“ncGrade2Data” is the database
“extension” is the name of the database field
“extensionStrip” is my collapsing element

8

Thanks for the reply but this is not working for me, very confused.

9

@singhsmanoj Perdón pero te lo digo en español. A mí tampoco me funcionaba pero después sí me funcionó porque de que me di cuenta que “extension” no es el nombre de un item en la página que está conectado a la base de datos, sino que “extension” es el nombre de un campo la base de datos, que suele ser un nombre que uno no ve mientras está editando en wix, sino sólo cuando va y mira la base de datos y ve las propiedades de ese campo.
Espero que te sirva mi explicación en castellano. Eso fue lo que me salvó a mí.

10

SOLVED:

$w . onReady ( function () {

$w ( "#datasetNameHere" ). onReady (() => { 
    **let**  item  =  $w ( "#datasetNameHere" ). getCurrentItem ();

// Based on if your field is a text/URL type of input
if ( item . fieldID1 === undefined ){
$w ( “#itemToHide” ). hide ();
$w ( “#itemToHide” ). collapse ();
} else {
$w ( “#itemToHide” ). show ();
$w ( “#itemToHide” ). expand ();
}

// Based on if your field is a boolean type of input
if ( item . fieldID1 === true ){
$w ( “#itemToHide2” ). hide ();
$w ( “#itemToHide2” ). collapse ();
} else {
$w ( “#itemToHide2” ). show ();
$w ( “#itemToHide2” ). expand ();
}

});

});

NOTES:

  • If you’re using a field that has a typed input, you use “undefined”.

  • If you’re using a field that has a boolean check mark, you use “true”.