• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Hide empty elements in div template list view

supcha

New Member
Hi,

I am using a custom template (created from the standard div template) and I would like to hide the parent div of all empty elements in list view.


how can I achieve this?


Thanks for this awesome component, it took me a while to understand it but it was realy worth it!

Regards,
supcha
 
You will need to do some coding in the main template file to loop through the rows in the list and the elements in the row and see which of the elements do / do not have non-empty values in one of the rows. Then you need to modify the existing template to only show the divs for those elements which have values.

If you want a similar (but different) example, the bootstrap form template has something similar to not show a group title if all the elements are hidden.

If you want to post your proposed code here for review...

Hope this helps. Good luck.

S
 
I'd be interested by this one because I never succeeded to get it work, and we are talking about EMPTY elements, not HIDDEN elements.
 
Yes - my form fix was to hide group titles for groups where all elements were hidden. However the concept is similar if for lists you want to hide divs for which all elements are empty - you just need to code it differently i.e. to loop through both rows and elements, to use an array of element names to store the !empty settings etc.

S

P.S. I would code it myself, but I am working on other stuff.
 
I have not re-test it for some time, but last time I did I could not succeed as apparently empty element (= no value) are not actually "empty", so it didn't work.
 
Yes - I suspect that the element value field (whatever that is) has some HTML in it. But there is a raw variable which you could check too I think.

S
 
jfquestiaux, I had the same problem of empty fields not being empty of some code (I can't realy figure out what it is btw)

My php skills realy aren't the best the only thing I can think of is a jquery script to check if div is empty (or has the "empty code") and to hide them.
This isn't the best solution but it should work. I'll try it right now and post it if it works.

If you have better ideas, I'd be glad to hear them.

PS: I might seem dumb but what is the diference betwen hidden and empty elements?
 
I'm still not really sure I understand what the end-game is supposed to be here - but if it's a matter of eliminating (hiding) a column from a list if all of the elements in a certain column are empty, then this jQuery code added to the jQuery(document).ready(function() { }); should do the trick.

This sample code was tested on a table named 'testdbj' on a element named 'test_text' in a list with the ID #121.
It works both as an element without imbedded html and with html (i.e. if it was set to be shown as "Link to details")
Code:
var content = "";
jQuery('#list_121_com_fabrik_121 td.testdbj___test_text').each(function() {
    content += jQuery(this).text();
});
if(jQuery.trim(content)=="") jQuery('#list_121_com_fabrik_121 .testdbj___test_text').hide();

Note how the 'td' is used in the each function but eliminated from the hide(). This way the <th> column heading is ignored when checking for empty content yet included in the hide.:)
 
A "hidden" element refers usually to elements that are hidden in the form views: typical hidden elements are the id and date_time of the record.

"Empty" element on the other hand are elements that don't have values entered by the form (because they are not mandatory fields).

My use of this is to display a record in a module: this record has a few field elements that may or not contain a value. In my div Fabrik template, I want to show only the elements that have a value (these elements are of course not the same from one record to another, otherwise it would be easy).

However, I think it's only a problem if the value is "NULL". If it's "0", it should not be difficult, but as I said, I have not tested this again for some time.
 
jfquestiaux, thx for the explanation about hidden/Empty elements.

Sophist, "Yuk!!" I understand this isn't a good way to achieve my goal (isn't SEF, it doesn't seem very intelligent to make a list on server side then ask the client to hide parts of it afterwards and surely other reasons I can't think about) but until I have the suficient php (or other) knowledge, this is the solution I found...

Bauer, The aim is to hide elements that haven't been filled in the form, so that the empty fields don't use space in the list view, I find it "pretty" in my template (I use a div template and not a table so there are no column headdings).
Thx for the script, I'll have a go at it, do you think is it better than the one I proposed (and why)?

Sorry for beeing painfull but I am no professional and I just want to learn.
Regards
 
Bauer, The aim is to hide elements that haven't been filled in the form, so that the empty fields don't use space in the list view, I find it "pretty" in my template (I use a div template and not a table so there are no column headdings).
Thx for the script, I'll have a go at it, do you think is it better than the one I proposed (and why)?

Sorry for beeing painfull but I am no professional and I just want to learn.
Regards
I see nothing wrong with using the contains selector - other than your example is requiring the contents to be a blank string of AT LEAST a certain length. (What if the 'blank' is less than that length?)

Some elements use different nested html tags in them, so 'parent' might not be a good choice in all cases - and I don't see how using it would hide the column header which always 'contains' something. So I was confused as to how/why your solution worked for you.

It's always best (and easiest) to work from the outermost known html tag (in this case the '<td>' tag) rather than from the inside out. But if you ever do need to work from the inside out, and you know the class you are looking for - closest(.classname) is the better choice (rather than parent()).

Without seeing an actual html example of what you are trying to remove, I wasn't really sure what you are trying to do. But it looks like I guessed your intent correctly (you are talking about the list display and not the form, correct?) - and in that case the code I suggested should work, regardless the type of element.
 
thx for answering,

In my case, non filled in fields contain that number of blank spaces.

This is my html default code for an element in list view :
Code:
<div class="table1___element1 fabrik_element fabrik_list_1_group_1">
<div class="elt_wraper">
<div class="elt_inner">
element 1
</div>
</div>
</div>

The div I need hide is the first if there are the number of blank spaces instead of "element 1" so I should have this jquery code?

Code:
$(document).ready(function() {
$('.cell_inner:contains("                                    ")').closest('.fabrik_element').hide();
});
 
Sorry supcha I've been into some overdue yardwork all day.

I just realized this is nothing close to what I thought it was when I tested and posted my suggestion.
I had set the template to div but not for the admin backend - duh.
So my suggestion would be for a normal html table type of list.

And now that I changed the list admin template to 'div' to test, I get errors using that div template and nothing works. I have never even tried using that template before, so it's all Greek to me. I'm updating from github to see if that fixes it - then hopefully I can try with what you're using.

Until then - after looking at your example, I don't think there will ever be any additional html tags in that inner div - so let me know how this works...
Code:
$(document).ready(function() {
  $('.elt_inner:empty').closest('.fabrik_element').hide();
});
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top