Hide an empty field

Discussion Ask a question
,
1

As I am working with my new search capability (yay!), I am wondering the proper way to do this next piece in Wix. I have a multi-line search form. They can enter up to 5 items to look for in the database with one click of a button. The results are returned below in a custom layout of individual text boxes. All of that is working. Now, I would like the site to hide any text boxes in the results that are empty (i.e., the client only searched for 3 items, not 5 - I would like to show three results boxes and hide the remaining 2 empty ones.) I did a search looking for ways to do this in traditional code and it was accomplished by hiding a div, but I was thinking there was a specific way we need to handle these situations in wix since we don’t really mess with CSS. Suggestions?

2

You can hide elements using code (look for the API) if the result is empty.

3

Tomer, I have looked for this feature, and I assume it would be within the $w.Textbox element, but I do not see that as a valid extension. I need to check a text box to see if it is empty in order to determine whether it is collapsed or expanded, but the code I tried did not work (error said "empty was undefined’). Could you point toward which of the APIs addresses this feature?

4

Hi,

to check Textbox value you would use $w(‘#textbox’).value and then check if it is empty.

Empty input box will have an empty string as a value.

$w('#textbox').value === '' // true if empty

And you can hide and show a textbox with

$w('#textbox').hide()
$w('#textbox').show()
1 Like
5

I have the same problem of “hiding the empty boxes” with photos and galleries. I guess it should work like textboxes as Giedrius said, but i couldnt achieve to hide those empty boxes.

I’m not a coder and maybe there is a logic link missing between

$w('#image3').value === '' // true if empty

and

 $w('#image3').hide()

Or does empty boxes need to have a 0 ?

Thank you.

6

Hi Vincent,
I’m assuming you connected the image source to a field in a collection, and you want to handle a case where that field doesn’t have a value.
In that case, you need to check the “src” property:

$w('#image3').src === undefined

I’m comparing to “undefined” since in the collection, when there’s no value for a field, the value is undefined. Give it a try and update.

2 Likes
7

I will try this in the next day or so and let you know if I am successful. Thank you to everyone who commented!

8

Hi,
Thank you Tomer for your answer. I tried and failed, i assume there is a logic link missing between [value being empty] and [hiding the image block] if and only if the field is empty. I’d like to see an example of a working code.

Thank you !

9

Hi,
The code will depend on the values you have in your collection, so let’s try to see what’s in there.
Can you try printing the value you get from the image? You can do it like that:

console.log('image source value:', $w('#image3').src)

Add that to the relevant place in your code and it print to the developer console the value.
If you don’t know where to put it, post your code here and I’ll help.

10

Hi Tomer, i m following this, need the same, hiding a box element if a field (textbox) is empty
can you please help me with the code
Thank you

11

Hi Tomer again, i still dont get why it seems so complicated to do something that simple.
I gave under those lines the most explicit illustration to my problem. Would be cool if you show an example that works by showing your code added in an existing one. I have no precise idea where i should paste it. Thank you tho

1240×2362 448 KB

12

Hi,

The default behaviour of an empty image element is to display a blank box, and not to collapse the box, which is what you are trying to achieve.
We do not collapse the box if the value is empty since it can sometimes mess with the page layout and cause structure problems.

You can collapse empty elements by using code:

$w.onReady(function () {
	//Wait for dataset1 to finish loading
	$w("#dataset1").onReady(function () {
		//get the value
		const imageValue = $w('#image1').src;
		//collapse the image box if imageValue is empty
		if (imageValue === '') {
			$w('#image1').collapse();
		}
	});
});
3 Likes
13

Thanks for that, can you please adjust this code for the case where empty field is rich text, not an image. Thanks again)

14

Thank you very much ! It doesnt work but we’re getting closer.

I pasted the code you wrote remplacing blue entries by mine.
One thing you should know is i do not use image boxes but gallery boxes (idk if its useful)
so my code look like this :

$w.onReady(function () {
	//Wait for dataset1 to finish loading
	$w("#dynamicDataset").onReady(function () {
		//get the value
		const imageValue = $w('#gallery7').src;
		//collapse the image box if imageValue is empty
		if (imageValue === '') {
			$w('#gallery7').collapse();
		}
	});
});

I tested it only for the last gallery box (the 7th) and it doesnt work, i got this little red dot that says : "src"is undefined
I guess that’s the only thing holding the code to work
thanks for your help !

1626×232 28.5 KB

15

Hi guys!

For some reason Ido’s code doesn’t work for me. I think because when there is no image its value is not ’ ’ .

But you can try this:

In the collection, each time there are no images to show, instead of leave it in blank put there any URL that you’re sure never use or even any one that doesn’t exists at all. Example: https://images.jpeg (this one doesn’t exists, so it’s good for the purpose).

And use the following code:
(adapt “dataset1” and “image1” for you case)
(choose another URL if you don’t like the one I suggest)

$w.onReady(function () {
$w(“#dataset1”).onReady(function () {
const imageValue = $w(‘#image1’).src;
if (imageValue !== ‘https://images.jpeg’) {
$w(‘#image1’).show();
$w(‘#image1’).expand();
} else {
$w(“#image1”).collapse();
$w(“#image1”).hide();
}
});
});

Hope it helps!
Regards!

3 Likes
16

not sure if this was solved. but i need to hide a button on a dynamic page when the field cell is empty. WHat is the code to hide a button or show a button based on the dataset cell containing info or not. In this case the button opens a url. so where there is no url there shouldnt be a button.
please help
i am not sure how to write the code and where to put it.

1 Like