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?
top of page
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
![feature fixed.png](https://static.wixstatic.com/media/3bfa8a_f845e1016b8a49758acdd6edd6610c3b~mv2.png/v1/crop/x_0,y_2,w_852,h_508/fill/w_104,h_62,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/feature%20fixed.png)
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
bottom of page
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.
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!
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 !
Thanks for that, can you please adjust this code for the case where empty field is rich text, not an image. Thanks again)
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(); } }); });
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
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
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.
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 !
I will try this in the next day or so and let you know if I am successful. Thank you to everyone who commented!
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.
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.
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()
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?
You can hide elements using code (look for the API) if the result is empty.