If/Else Collapse for Repeater Items

contact88 · December 15, 2017, 4:25am

I tried my hardest, I really did (lol) but, I cannot for the life of me figure out how to do this . Hopefully I can explain what this is, well enough.

So I have my repeater, and in my repeater there are Subtitles that are connected to a collection. For the items in my Dataset, they don’t alway have a Subtitle, so while the placeholder text is not visible if there is no Subtitle in the dataset, there is a blank space where it would be.

What I’m trying to do, is “If Subtitle is Empty, Collapse Text”, so that blank space is no longer visible when there is no Subtitle for an item.

Here’s some what I’ve tried so far.

Method 1

$w.onReady( function () {
$w("#repeater1").forEachItem( ($w) => {

let hasSubtitle = $w("#subTitle");
let searchValue = $w("#subTitle").text;

	wixData.query('Video-Library')
	 .eq("subtitle", searchValue)
	 .find()
	 .then( (results) => {
		let blankSub = results.items;
			if (blankSub) {
				hasSubtitle.collapse();
			}
			else {
				hasSubtitle.expand();
			}
	});	
	});
});

Method 2

$w.onReady(function () {
$w("#repeater1").forEachItem( ($w, itemData) => {

$w("#subTitle").text = itemData.subtitle;
let subTitle = $w("#subTitle");

let blankTitle = (subTitle.length === 0);

			if (blankTitle) {
				subTitle.collapse();
			}
			else {
				subTitle.expand();
			}
	});	
});

I can’t remember what else I’ve tried but they were all along the same lines. Please help me figure this out! I hope I’m not too far off because I’ve been tinkering for hours.

_tal · December 17, 2017, 8:27am

Hi,
You should use the query function a bit differently:

let hasSubtitle = $w("#subTitle");
let searchValue = $w("#subTitle").text;

   wixData.query('Video-Library') 
    .eq("subtitle", searchValue) 
    .find() 
    .then( (results) => { 
        //here you get all the DB records that their "subtitle"
        //fields equals to searchValue
        let videos = results.items; 
        //this is an array, therefore, should check for each record
         videos.forEach((video) => {   
         //video doesn't have a sub title         
          if (video.subtitle === null) { 	
                   hasSubtitle.collapse(); 			        
          } 
        };   
      }); 
     });

Note that I used the if statement only in case there is no sub title for the video. Otherwise, it should display the element and therefore there’s no need to expand it (since it is expanded by default).

I hope it’s clear.

Should the issue persists, please send us the site URL and the [age you were referring so that we can have a look.

Best,
Tal.

contact88 · December 18, 2017, 3:37am

Very clear! Thanks so much. I’ll post again once I have it working.

Much Appreciated, Tal!
Cheers!

contact88 · December 19, 2017, 2:02pm

I don’t know why the code isn’t working, it looks like it should. I’ve tried some variations but nothing has worked so far.

Var 1.1

import wixData from 'wix-data';

$w.onReady(function () {
let hasSubtitle = $w("#subTitle");
let searchValue = $w("#subTitle").text;

   wixData.query('Video-Library') 
    .eq("subtitle", searchValue) 
    .find() 
    .then( (results) => { 
        let videos = results.items; 
         videos.forEach((video) => {   
          if (video.subtitle === null) { 	
                   hasSubtitle.collapse(); 			        
          } 
        });   
      }); 
     });

Var 1.2

import wixData from 'wix-data';

$w.onReady(function () {
let hasSubtitle = $w("#subTitle");
let searchValue = $w("#subTitle").text;

   wixData.query('Video-Library') 
    .eq("subtitle", searchValue) 
    .find() 
    .then( (results) => { 
        let videos = results.items; 
         videos.forEach((video) => {   
          if (video.subtitle !== null) { 	
                   hasSubtitle.expand(); 	
        // selected the items to be collapsed on load  		        
          } 
        });   
      }); 
     });

Var 2.1

import wixData from 'wix-data';

$w.onReady(function () {
let hasSubtitle = $w("#subTitle");
let searchValue = $w("#subTitle").text;

   wixData.query('Video-Library') 
    .eq("subtitle", searchValue) 
    .find() 
    .then( (results) => { 
        let videos = results.items; 
         videos.forEach((video) => {   
          if (video.subtitle.length < 1) { 	
                   hasSubtitle.collapse(); 			        
          } 
        });   
      }); 
     });

Var 2.2

import wixData from 'wix-data';

$w.onReady(function () {
let hasSubtitle = $w("#subTitle");
let searchValue = $w("#subTitle").text;

   wixData.query('Video-Library') 
    .eq("subtitle", searchValue) 
    .find() 
    .then( (results) => { 
        let videos = results.items; 
         videos.forEach((video) => {   
          if (video.subtitle.length > 0) { 	
                   hasSubtitle.expand(); 
             // selected the items to be collapsed on load  
          } 
        });   
      }); 
     });

If you could take a look it would be appreciated.

Redacted Link

contact88 · December 21, 2017, 3:38am

Hi there, just seeing if this has been looked into. Still tinkering on my own but nothing has worked yet.

mikhail-spirin-wix · December 21, 2017, 12:56pm

Hi again
You can do this much simpler.

$w("#repeater1").onItemReady(($w, itemData, index) =>{
		if (!itemData.subtitle) {
				$w("#subTitle").collapse; 
		}	
});

onItemReady function, called on repeater, adds function which executes each time when container gets data from dataset
I tried it on your site, but problem is that i didn’t see any subtitles there to check) on page which you mentioned

contact88 · December 21, 2017, 1:13pm

Sigh still no luck, did I need to modify that code at all?
Tried adding a dataset onReady to it as well.

$w.onReady(function () {
	$w("#videoData").onReady ( () => {
$w("#repeater1").onItemReady(($w, itemData, index) =>{
		if (!itemData.subtitle) {
				$w("#subTitle").collapse; 
		}	
});
 }); 
 });

Only a few actually have subtitles,
Item 11 (Title: You’re Not A Virgin [lmao OMG so weird typing this in a public forum]) is the first item to have a subtitle. I’ve changed the limit to 30 items for now so it can be seen on the main page view.

mikhail-spirin-wix · December 21, 2017, 1:16pm

oh yes, i see it. Checking, thanks

contact88 · December 21, 2017, 1:18pm

You’re so helpful Mikhail! Thank you so much, it’s very appreciated. I was at a standstill.

mikhail-spirin-wix · December 21, 2017, 2:14pm

Finally… It was my miss. Try this:

$w("#repeater1").onItemReady(($w, itemData, index) =>{
		if (!itemData.subtitle) {
				$w("#subTitle").collapse(); 
		}	
});

No reason to put it somewhere into onReady for dataset. Just under main onReady() function. We’re setting here behavior for every container - when it’s ready, if subtitile is empty, this comp collapsed

contact88 · December 21, 2017, 2:43pm

YAAAAAYYYYY!!! This did it! like you said, Finally. lol Thanks so much Mikhail! does happy dance

Oh I see what was missing, the () after collapse.

mikhail-spirin-wix · December 21, 2017, 2:58pm

Great to hear, thanks)

chasingadventure29 · December 27, 2017, 7:52pm

This should work for any type of element, correct? If so, then I probably need a tad bit more explanation.

$w("#repeater1").onItemReady(($w, itemData, index) =>{ 
		if (!itemData.approachPhoto1) { 
				$w("#image9").collapse();  
		}	 
});

approachPhoto1 is the header on the image field in the database, and image9 is the element on the page. As for “#repeater1” it’s not very clear to me what this is suppose to be. I’ve left it as is, and I’ve substituted suggestions after using ctrl+space and none of them have worked.

Thanks!

mikhail-spirin-wix · December 30, 2017, 7:33pm

Hi! I’m not sure what you want to achieve. Please, describe your usecase more

onItemReady event handler is relevant only for repeater. This sets up a function, which will be executed when any container within repeater is ready and got it’s data. And those functions are disfferent - it’s one per one container

So, what are you trying to achieve?

chasingadventure29 · January 1, 2018, 12:25am

Ahhh, I seem to have misunderstood the repeater part of this. Anyway, I’m creating a website template for writing trip reports. The template might have spaces for say 10 images, but I might only use 8 of them. I’d like the dynamic page to automatically hide the other two images.

registration · March 1, 2019, 3:49pm

I have tried this code with no success, can you please help me figure out what I am doing wrong.

phil35267 · June 8, 2021, 6:53pm

Hi! I’m doing a menu page where many menu items are shown on the page. The container where the description is shown is #text6 and the column name in the dataset is Description. I used the code shown above and it works… a little too well. Now, all the descriptions are collapsed, not only the ones with empty descriptions.

Here’s the code I have :

 $w("#repeater1").onItemReady(($w, itemData, index) =>{
 if (!itemData.Description) {
                $w("#text6").collapse(); 
 }

I’m not a programmer so I don’t understand a lot in the code. I guess my problem is I have nothing to tell the not empty ones not to collapse. I tried adding the else part, but it didn’t work.

 $w("#repeater1").onItemReady(($w, itemData, index) =>{
 if (!itemData.Description) {
                $w("#text6").collapse(); 
 } else {
 $w("#text6").expand(); }

Any idea how to fix this?

Topic		Replies	Views
Hiding an element if a repeater is empty Ask the community code , question	11	3282	December 4, 2019
Detecting blank text field for collapse in repeater Ask the community code , question	5	242	June 6, 2020
Collapse video in repeater Ask the community code , question	4	209	July 1, 2020
Collapsing an element in a repeater (per item!) Ask the community wix-studio , code , question , api	1	96	October 9, 2023
Trying to collapse a gallery Ask the community code , question	6	271	May 5, 2020