Collapsing Empty Textboxes

coltonfouts · November 7, 2018, 3:42pm

Hello Everyone,

I am having an issue trying to figure out how to collapse multiple textbox when there is no data provided via the dataset. I have approached this different ways and none have been successful (other than turning off all the textboxes).

Here is my current code:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixData from 'wix-data';

$w.onReady(function () {
 //Wait for dataset1 to finish loading

    $w("#dataset1").onReady(() => {
 let itemObj = $w("#dataset1").getCurrentItem();
 if (!itemObj.text === '') {
            $w('#text12').collapse();
            $w('#text13').collapse();
            $w('#text14').collapse();
            $w('#text15').collapse();
            $w('#text16').collapse();
            $w('#text17').collapse();
            $w('#text18').collapse();
            $w('#text19').collapse();
            $w('#text20').collapse();
            $w('#text21').collapse();
            $w('#text22').collapse();
            $w('#text23').collapse();
            $w('#text24').collapse();
            $w('#text25').collapse();
            $w('#text26').collapse();

        } else {
            $w('#text12').expand();
            $w('#text13').expand();
            $w('#text14').expand();
            $w('#text15').expand();
            $w('#text16').expand();
            $w('#text17').expand();
            $w('#text18').expand();
            $w('#text19').expand();
            $w('#text20').expand();
            $w('#text21').expand();
            $w('#text22').expand();
            $w('#text23').expand();
            $w('#text24').expand();
            $w('#text25').expand();
            $w('#text26').expand();

        }

    });
});

Here are some photos:

Examples of prior code used (no success):

import wixData from 'wix-data';

$w.onReady(function () {
 //Wait for dataset1 to finish loading
    $w("#dataset1").onReady(function () {
 //get the value
 const textValue = $w('#dataset1').setFieldValue('');
 //collapse the text box textValue is empty
 if (textValue === '') {
            $w('#text12').collapse();
            $w('#text13').collapse();
            $w('#text14').collapse();
            $w('#text15').collapse();
            $w('#text16').collapse();
            $w('#text17').collapse();
            $w('#text18').collapse();
            $w('#text19').collapse();
            $w('#text20').collapse();
            $w('#text21').collapse();
            $w('#text22').collapse();
            $w('#text23').collapse();
        }
    });
});

Thank you!

andreas-kviby · November 7, 2018, 4:23pm

Hey
In your code you are checking if the field with fieldKey text is equal to ‘’ and I guess you have no fieldKey called text but you want to check a lot of fields is they are empty?

let itemObj = $w("#dataset1").getCurrentItem(); 
if (!itemObj.fieldKeyHere === '') { 
  // Your stuff here
  // Collapse the text element that is empty
}

So you can’t check all at once as long as you don’t loop through all controls and check the value in the fields after the page is rendered and then collapse those with empty strings inside.

coltonfouts · November 7, 2018, 4:58pm

Hey Andreas,

I see what you are saying… I guess what I am trying to do is make the empty text-cells collapse if there isn’t text to pull from the dataset. Currently, I am left weird formatting with empty text-cells (no hours of operations put into those cells on the live side.

I am not sure how to resolve this honestly. Though I do feel I am close.

Thank you for your quick response.

coltonfouts · November 7, 2018, 8:49pm

Still playing around with this—here my code:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from 'wix-data';
$w.onReady(function () {
//Wait for dataset1 to finish loading
    $w("#dataset1").onReady(function () {
//get the value
let itemObj = $w("#dataset1").getCurrentItem();
if (!itemObj.weekdayHours4 === '') {
//collapse the text box weekdayHours4 is empty
            $w('#text18').collapse();
        } else {
            $w('#text18').expand();
        }
    });
});

Unfortunately, I can only seem to get every text box to collapse regardless if they have content or not…

Thank you,
Colton

_or · November 19, 2018, 4:43pm

Hi,
If you want to collapse the text when the “weekdayHours4” field is empty you should remove the “!” sign from the beginning of the condition.

coltonfouts · December 19, 2018, 2:24pm

Thank you Or. It seems to be sort of working now. However, it seems it is not consistent on collapsing of the text fields.

For example Weekend Hours 3 collapses regardless if it has text in the cell from the #dataset1.

Below is my current code.

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixData from 'wix-data';

$w.onReady(function () {
 //Wait for dataset1 to finish loading
    $w("#dataset1").onReady(function () {
 //get the value
 let itemObj = $w("#dataset1").getCurrentItem();

 if (itemObj.weekdayHours1 === undefined) {
 //collapse the text box #text14 if empty
            $w('#text14').collapse();
        } else {
            $w('#text14').expand();
        }

 if (itemObj.weekdayHours2 === undefined) {
 //collapse the text box #text16 if empty
            $w('#text16').collapse();
        } else {
            $w('#text16').expand();
        }

 if (itemObj.weekdayHours3 === undefined) {
 //collapse the text box #text17 if empty
            $w('#text17').collapse();
        } else {
            $w('#text17').expand();
        }

 if (itemObj.weekdayHours4 === undefined) {
 //collapse the text box #text18 if empty
            $w('#text18').collapse();
        } else {
            $w('#text18').expand();
        }

 if (itemObj.weekdayHours1 === undefined) {
 //collapse the text box #text14 if empty
            $w('#text14').collapse();
        } else {
            $w('#text14').expand();
        }

 if (itemObj.weekend === undefined) {
 //collapse the text box #text19 if empty
            $w('#text19').collapse();
        } else {
            $w('#text19').expand();

        }

 if (itemObj.weekendHours1 === undefined) {
 //collapse the text box #text20 if empty
            $w('#text20').collapse();
        } else {
            $w('#text20').expand();

        }

 if (itemObj.weekendHours2 === undefined) {
 //collapse the text box #text21 if empty
            $w('#text21').collapse();
        } else {
            $w('#text21').expand();

        }

 if (itemObj.weekendHours3 === undefined) {
 //collapse the text box #text26 if empty
            $w('#text26').collapse();
        } else {
            $w('#text26').expand();

        }

 if (itemObj.specialDay === undefined) {
 //collapse the text box #text22 if empty
            $w('#text22').collapse();
        } else {
            $w('#text22').expand();

        }

 if (itemObj.specialDayHours === undefined) {
 //collapse the text box #text23 if empty
            $w('#text23').collapse();
        } else {
            $w('#text23').expand();

        }

    });
});

_or · December 26, 2018, 2:14pm

@coltonfouts please share “itemObj” after this line:

let itemObj = $w("#dataset1").getCurrentItem();

use console.log(itemObj) to see the variable in the console.

coltonfouts · December 26, 2018, 2:37pm

@_or Below you can see the log. From the list/log I can see that “.specialDay” and “.specialDayHours” is missing.

I am assuming because the first repeater container does not contain a specialDay text-field it removes it from the repeater all together.

Thanks again.

Loading the code for the WHERE TO EAT page. To debug this code, open c10g7.js in Developer Tools.
{...}
_id: "173bfc15-4877-4de7-b337-6e2609ef5b8a"
_owner: "63ca630f-61a4-471e-abca-e7e89b796f96"
_createdDate: "2018-06-06T20:10:01.800Z"
_updatedDate: "2018-07-02T20:18:26.694Z"
title: "Rawling Dining Hall"
weekDay: "Monday–Friday:"
weekdayHours1: "Breakfast: 7:00am–9:00am"
weekdayHours2: "Continental Breakfast: 9:00am–10:30am"
listOrder: "1"
weekdayHours3: "Lunch: 11:00am–2:00pm"
weekdayHours4: "Lite Lunch 2:00pm–4:00pm"
weekdayHours5: "Dinner: 4:30pm–7:00pm"
weekdayHours6: "Lite Dinner: 7:00pm–8:00pm"
weekend: "Saturday & Sunday"
weekendHours1: "Brunch: 10:30am–2:00pm"
weekendHours2: "Dinner: 4:00pm–8:00pm"

WHERE TO EAT
Line 11 You are currently in preview modeSaveBack to Editor

_or · January 1, 2019, 4:22pm

@coltonfouts Hi,
When a cell is empty, does it return an empty string (“”) or undefined?
Maybe you should change the condition to:

(itemObj.weekendHours3 === "")

If that isn’t helpful please share your editor’s URL, only authorised wix employees can use the link.

coltonfouts · June 14, 2019, 4:03pm

I think the root of the problem is that I’m using the current item and not considering all the items. Tried replacing “getCurrentItem” with “getItems” to see the full data set, but for some reason, it isn’t giving me any results at all. Here is the current code

import wixData from ‘wix-data’;
$w.onReady( function () {
//Wait for dataset1 to finish loading
$w(“#dataset1”).onReady( function () {
//get the value
let itemObj = $w(“#dataset1”).getItems( );
console.log(itemObj)
});
});

should work exactly the same as “getCurrentItem” but this time the console log is blank.
Anyone have ideas on why?

Topic		Replies	Views
Collapsing Empty Text Fields... Ask the community code , question	1	377	June 7, 2018
Collapsing text item when content manager text field is empty Ask the community code , cms , question	16	288	February 11, 2021
Collapse if isEmpty Ask the community code , question	4	741	June 12, 2023
Collapse elements when dataset returns 0 results. Ask the community code , question	10	216	July 19, 2020
Collapse button when data fiels is empty Ask the community code , question	1	118	April 27, 2020

Collapsing Empty Textboxes

Related topics