I want to know which items checked or unchecked when it's changed.

var MenuTree = function () {
    $.ajax({
        type: "POST",
        url: "Menu_Permission.aspx/Menu",
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            var menujson = JSON.parse(data.d);
            $('#tree_menu').jstree({
                'plugins': ["wholerow", "checkbox", "types"],
                'core': {
                    "themes": {
                        "responsive": false
                    },
                    'data': menujson
                }
            });
        },
        error: function () {
            console.log('err')
        }
    });

    $(function () {
        $('#tree_menu').on('changed.jstree', function (e, data) {
            console.log(data.node);
            console.log(data.selected);
        });
    });

    $(function () {
        $('#tree_menu').on('deselect_node.jstree Event', function (e, data) {
            console.log(data.node.id);
        });
    });
    $(function () {
        $('#tree_menu').on('select_node.jstree Event', function (e, data) {
            console.log(data.node.id);
        });
    });


}

I have these functions and changed.jstree returns object and I cannot reach the id which is clicked. Others return me id exactly but, if it is the last checked item and it changes, How will I know parents checkbox is changed or not. Otherwise if it is the root item and it has children, all of them will gone and how can I know it. data.selected returns me array of selected but is there any way to know which is changed, from slected to to unselected or reverse?

And the functions fire onload, how can I change it?

I want to know which items checked or unchecked when it's changed.

var MenuTree = function () {
    $.ajax({
        type: "POST",
        url: "Menu_Permission.aspx/Menu",
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            var menujson = JSON.parse(data.d);
            $('#tree_menu').jstree({
                'plugins': ["wholerow", "checkbox", "types"],
                'core': {
                    "themes": {
                        "responsive": false
                    },
                    'data': menujson
                }
            });
        },
        error: function () {
            console.log('err')
        }
    });

    $(function () {
        $('#tree_menu').on('changed.jstree', function (e, data) {
            console.log(data.node);
            console.log(data.selected);
        });
    });

    $(function () {
        $('#tree_menu').on('deselect_node.jstree Event', function (e, data) {
            console.log(data.node.id);
        });
    });
    $(function () {
        $('#tree_menu').on('select_node.jstree Event', function (e, data) {
            console.log(data.node.id);
        });
    });


}

I have these functions and changed.jstree returns object and I cannot reach the id which is clicked. Others return me id exactly but, if it is the last checked item and it changes, How will I know parents checkbox is changed or not. Otherwise if it is the root item and it has children, all of them will gone and how can I know it. data.selected returns me array of selected but is there any way to know which is changed, from slected to to unselected or reverse?

And the functions fire onload, how can I change it?

• javascript
• jquery
• arrays
• object
• jstree

• Can you provide a jsfiddle or jsbin with a specific example of what you expect? – Phil H Commented Mar 26, 2014 at 14:25

1 Answer 1

Use following:

$(function () {
    $('#tree_menu').on('changed.jstree', function (e, data) {
        console.log(data.node.id);
    });
});

Instead of

console.log(data.node);

Use

console.log(data.node.id);