jquery - fancy tree - no data present

Question

I am using jquery fancy tree to represent a tree in my web app.

https://github.com/mar10/fancytree

Here's my code as below. The issue is, when the source URL /documents/folders, returns an empty list, I would like my html to show the text "No Documents found". I searched the API but there is no way of doing this directly with the plugin.

I am new to the world of webapps. Could someone please point me in the right direction?

<div class="row" id="toprow">
    <div class="col-md-4" id="treeContainer">
        <h4>Choose a Document Type from the drop-down</h4>
        <div id="tree">

        </div>
    </div>
</div>

<script>
    $(function(){
        $("#tree").fancytree({
            source: {
                url: "/documents/folders"
            },

        });
    });
</script>

Answer 1

So, you have to take care of this outside of fancy tree. Basically what we want to do, is pull down the JSON ourselves, and then check its state and render the UI based on that, instead of directly putting it inside of fancy tree

$(function () {
    $.get('/documents/folders', function (result) {
        if(result.length > 0) {
            $("#tree").fancytree({
                source: result
            });
        } else {
            $('#tree').html('No documents found!');
        }
    }).fail(function() {
        $('#tree').html('No documents found!');
    });
});

Answer 2

I had a similar requirement, and solved it using the init function of FancyTree API.

In the HTML I had a message that was hidden (mainly for multiple language support), and in fancytree call, amongst others I specified the init option to handle the empty case:

init: function(event, data) {
    console.debug("initialised tree");
    if (data.tree.count() == 0){
        $('#attributeTree').find('#attributeTreeEmptyMessage').removeClass('display-hide');
        $('#attributeTree').find('.fancytree-container').addClass('display-hide');
    }else{
        $('#attributeTree').find('#attributeTreeEmptyMessage').addClass('display-hide');
        $('#attributeTree').find('.fancytree-container').removeClass('display-hide');

    }

}