1. Fabrik 3.8.1 has been released. It is mostly bug fixes and feature enhancements, but does include two new plugins (push notifications, and the sequence element). As usual we strongly recommend testing the new release on a sandbox if your application is mission critical, and always do an Akeeba backup before updating.

Hide empty elements in div template list view

Discussion in 'Community' started by supcha, Aug 22, 2013.

  1. supcha

    supcha New Member

    Level: Community
    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
     
  2. Sophist

    Sophist Well-Known Member

    Level: Community
    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
     
  3. jfquestiaux

    jfquestiaux Well-Known Member

    Level: Professional
    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.
     
  4. Sophist

    Sophist Well-Known Member

    Level: Community
    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.
     
  5. jfquestiaux

    jfquestiaux Well-Known Member

    Level: Professional
    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.
     
  6. Sophist

    Sophist Well-Known Member

    Level: Community
    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
     
  7. supcha

    supcha New Member

    Level: Community
    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?
     
  8. supcha

    supcha New Member

    Level: Community
    Code (Text):
    $('.your class:contains("                                    ")').parent().hide();
    works for me.
     
  9. Sophist

    Sophist Well-Known Member

    Level: Community
    Yuk!!
     
  10. Bauer

    Bauer Well-Known Member

    Level: Supporter
    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 (Text):
    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.:)
     
  11. jfquestiaux

    jfquestiaux Well-Known Member

    Level: Professional
    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.
     
  12. supcha

    supcha New Member

    Level: Community
    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
     
  13. Bauer

    Bauer Well-Known Member

    Level: Supporter
    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.
     
  14. supcha

    supcha New Member

    Level: Community
    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 (Text):
    <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 (Text):
    $(document).ready(function() {
    $('.cell_inner:contains("                                    ")').closest('.fabrik_element').hide();
    });
     
  15. Bauer

    Bauer Well-Known Member

    Level: Supporter
    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 (Text):
    $(document).ready(function() {
      $('.elt_inner:empty').closest('.fabrik_element').hide();
    });
     

Share This Page