hummingbird constructed from jquery not working

[kreamas]

Hi, I've tried to use construct a Hummingbird treeview by using

$('#treeview').append('<...li>My tag'); $('#treeview').append('<...li>-My subtag'); $('#treeview').append('<...li>--My subSubtag');

(obviously without the ... dots inside the < li > ) and so on, but it's just not working. If I construct it directly from my html

then it's ok.

What can be happening?

Thanks in advance.

[hummingbird-dev]

Hi, Thanks for using the treeview. The reason is that in your case using $('#treeview').append you are generating DOM Elements dynamically and the treeview cannot access them. For dynamically created DOM Elements the treeview must be loaded afterwards:

$('#treeview').append('<...li>My tag');
$('#treeview').append('<...li>-My subtag');
$('#treeview').append('<...li>--My subSubtag');

$.getScript('mypath/hummingbird-treeview.js').done(function(){
   $(document).ready(function() {
      //options
      $.fn.hummingbird.defaults.checkDisabled= true;
      //initialisation
      $("#treeview").hummingbird();
      //methods
      $("#treeview").hummingbird("checkAll");
   });
});

However, this is an important issue and I will add that to the documentation. So, thanks again for pointing to this. Another thing, which I am thinking about for a time, and maybe you are actually trying that, is dynamically adding and removing nodes, which would be great. I will try to implement a method for that.

[kreamas]

Thanks a lot for your response :)

I'll try it right now!!!

[kreamas]

Thanks a lot, finally I've solved.

I know you're the expert but in case this helps I share you the way I solved it (vía a call to Django through Ajax).

For instance, it is a tree that loads Sales Force Structures :)

function arbol(){

$.ajax({
    url: "/loadbase/",  
    type: 'GET',        
    data: $().serialize(),

    success: function(json){

    //Ahora vamos a poner el arbol

        //Empezamos con el Nacional
        $(".trivago").append("<li>Total Nacional</li>");

        var k = 1;
        //Comenzamos las iteraciones
        for (x = 1; x < (json.regional.length+1); x++){
            $(".trivago").append("<li id = " + json.regional[x-1] + ">-" + json.regional[x-1] + "</li>");

            for (y = 1; y < (json.distrital[x-1].length+1); y++){
                $(".trivago").append("<li>--" + json.distrital[x-1][y-1] + "</li>");

                for (z = 1; z < (json.ruta[k-1].length+1); z++){
                    $(".trivago").append("<li>---" + json.ruta[k-1][z-1] + "</li>");

                }

                k = k+1;

            }

        }

        $("#treeview").hummingbird();

    }

});

}

[hummingbird-dev]

Great that you've found a solution. I've checked that and you are absolutely right. In your AJAX the DOM is updated and then the treeview is initialised. Now I see that the approach of using $.getScript is only needed, if the "Simple pseudo HTML" is used instead of the "Full HTML structure" as in your case.

[kreamas]

Hi, it's me again :(

Finally I've could create dynamically my hummingbird treeview...but it seems it only works the first time I create it.

What I'm trying to say is that, I've created a < select > option list to change dynamically my treeview depending on the option selected in such list.

For doing so, I've associated a function to that selectable list...when I click on my list, the server recieves the option selected and it returns to my ajax the response and...it creates a list (also dynamically)...but for some strange reason the call to the $("#treeview").hummingbird(); is not working.

The list is created but without the collapsibles the way it was on the very first call when it was created (in the onlad call).

Why is that happening?, I mean, I'm using a similar construction as the example I gave above :(

It's like if the $("#treeview").hummingbird(); only works for the first time it is invoked.

Do I have to "finalize" or "terminate" the initialized function before re-using it?

Thanks a lot.

[kreamas]

Hi, again.

I've noticed something really weird.

When I first load my page then the treeview is showed without any problem.

But if I click to refresh my site (A simple Ctrl + R) then it disappears (sometimes), then if I click Ctrl + R for say 3 times or 4 then it appears again, then it dissapears....it just happens in Chrome.

Do you know what can be happening?

[hummingbird-dev]

Ok, regarding the dynamical adding of nodes, I need to check that. But this will take some time. I will also try to implement a method for adding/removing nodes. Regarding the page refresh, I've not observed something like that, really strange. Can you check please in Chrome the following: Open the console by pressing ctrl-shift-i and then you can right click on the page refresh button and select "Empty Cache and Hard Reload" to be absolutely sure that everything is refreshed.

[hummingbird-dev]

Hi, I've implemented now new methods to add and remove nodes. See the "addNode" and "removeNode" methods in the README. Additionally, have a look at the example implementation

[kreamas]

Hi, thanks a lot Sebastian.

I'll try it immediately :)

[hummingbird-dev]

Hi, great. I'm happy to hear from you.

[kubickaoliver]

Hi @hummingbird-dev , I have tried to construct Hummingbird treeview within code below, but it does't work. Is there any way to solve it?

$.ajax({
                method: "POST",
                url: "/url",
                data: {
                    data: data
                },
                success: function(data) {
                    for (item of data) {
                        $('#treeview').append(`<li>${item}</li>`);
                    }
                    $("#treeview").hummingbird();
                }
            })

Thanks in advance, Oliver