daredevel tree in bootstrap modal

[biscit]

Hi,
I have implemented the daredevel tree in my application, and I ran into an issue.
For my application, I have dropdown in a bootstrap modal. On selection of an option from that dropdown, an ajax request is triggered. This ajax request fetches an unordered list form the server, is loaded in the bootstrap modal, under de selection list. Everything works just fine.
But Suppose I have chosen a wrong option, and I select a second one, the ajax request is fired,

is fetched and the old
is replaced by the new one.
But now, the tree is not collapsed, and the little arrows in front of the checkboxes, are not there.

This is the code that I use for my ajax request :

$('#shopkeuze').change(function() {

    var shopid = '';
    shopid = $('#shopkeuze').val();

    $.ajax({
        url: "product/laadWebgroepen",
        method: "post",
        data: {
            "id": shopid
        },
        beforeSend: function(request) {
            return request.setRequestHeader('X-CSRF-Token', $("input[name=_token]").val());
        },
        success: function(data) {

            $('#cat_tree2').html(data);

            $('#cat_tree2').tree({
                dnd: false,
                expandEffect: null,
                collapseEffect: null,
                onCheck: { ancestors: 'uncheck', descendants: 'check' }, onUncheck: { ancestors: 'uncheck' }
            });
        },
        error: function(thrownError) {
            console.log(thrownError);
        }
    });
});

can you give me a tip what is going on ? Many thanks in advance

[valeriogalano]

Hi biscit,
probably you should destroy jquery-tree before reload it.

Try to add

$('#cat_tree2').tree( "destroy" );

just before

$('#cat_tree2').html(data);

[biscit]

Hi Valerio,

Thanks for the answer.

Unfortunately, with the code above

success: function(data) {
$('#cat_tree2').tree('destroy');

$('#cat_tree2').html(data);



$('#cat_tree2').tree({
    dnd: false,
    expandEffect: null,
    collapseEffect: null,
    onCheck: { ancestors: 'uncheck', descendants: 'check' },

onUncheck: { ancestors: 'uncheck' }
});

added, I get a an uncaught error when initializing the tree for the first
time :

                                                 Uncaught Error: cannot

call methods on tree prior to initialization; attempted to call method
'destroy'

However, the html that is returned is an ul-element, and when I intitialize
the tree on the

element (and not on the parent container, as above),
the behaviour is correct, I can reload another
element by selecting
another option :

success: function(data) {

$('#cat_tree2').html(data);

$('#cat_tree2 ul').tree({
    dnd: false,
    expandEffect: null,
    collapseEffect: null,
    onCheck: { ancestors: 'uncheck', descendants: 'check' },

onUncheck: { ancestors: 'uncheck' }
});

but now there is something wrong with the css : every ul-element that is
expanded, gets a border.
But normally it is the parent container of the ul that should be initiated,
and not the ul - element itself ?

biscit

2015-04-15 12:34 GMT+02:00 Valerio Galano notifications@github.com:

Hi biscit,
probably you should destroy jquery-tree before reload it.

Try to add

$('#cat_tree2').tree( "destroy" );

just before

$('#cat_tree2').html(data);

—
Reply to this email directly or view it on GitHub
#41 (comment)
.