Get Checked Element in JQuery JStree

Question

I have created one Jquery jstree with JSON object. My tree is working fine

Creating jstree

$("#tree").jstree({
    "json_data": {
        "data": [{
            "data": "pe_opensourcescanning",
            "id": 0,
            "pId": -1,
            "children": [{
                "data": "tags",
                "id": 30,
                "pid": 0
            }, {
                "data": "branches",
                "id": 29,
                "pid": 0
            }, {
                "data": "trunk",
                "id": 1,
                "pid": 0,
                "children": [{
                    "data": "import-export",
                    "id": 28,
                    "pid": 1
                }, {
                    "data": "custom_development",
                    "id": 12,
                    "pid": 1
                }, {
                    "data": "Connectors",
                    "id": 7,
                    "pid": 1
                }, {
                    "data": "support",
                    "id": 6,
                    "pid": 1
                }, {
                    "data": "Installation-Configuration",
                    "id": 5,
                    "pid": 1
                }, {
                    "data": "backup",
                    "id": 2,
                    "pid": 1
                }]
            }]
        }]
    },
    "plugins": ["themes", "json_data", "checkbox", "ui"]
}).bind("select_node.jstree", function (e, data) {
    alert(data.rslt.obj.data("id"));
});

Now i want the "id" and "data" values for each checked nodes. I have tried to write something but unfortunately that doesn't work. Kindly help me how to achieve this goal.

Getting checked nodes

$("#tree").jstree("get_checked",null,true).each(function () { 
    alert(this.data);
    alert(this.id);
});

check out this link http://stackoverflow.com/questions/6048001/get-checked-values-for-jstree-submit-with-form-post — Rooster, Aug 16 '13 at 19:10
I had already seen that. but in my case "this.id" and "this.data" are coming as void. — Shibankar, Aug 16 '13 at 19:34
try console.log(this); that should help point you in the right direction — Rooster, Aug 16 '13 at 20:16
@Rooster i have tried as u suggested. it gives me in the console as "
jstree mimics checkboxes unless you set the param to tell it to use real ones. Maybe you have. You can try a console.log($(this).find('input[type="checkbox"]')); if its length is one just grab the id and data from that, if it 0 then you need to grab the id and data from whereever its being stored in relation to the li element. — Rooster, Aug 16 '13 at 21:00
@Rooster i am getting the output as zero. now what i have to do. please tell me in brief as i am very new in jquery and json. — Shibankar, Aug 16 '13 at 21:21
inspect the DOM and figure out what element has the data and id youre trying to reach and target that instead. — Rooster, Aug 16 '13 at 21:31

Irvin Dominin · Accepted Answer · 2013-08-17T14:54:55.850

Your function to get checked nodes is right, the problem is your JSON that is not well-formed; to set property on the tree, so they can't be get from the methods.

You must use the property attr or no data will be set on the node, from the docs:

The attr object will appear as attributes on the resulting li node.

Code:

$("#tree").jstree({
    "json_data": {
        "data": [{
            "data": "pe_opensourcescanning",
                "attr": {
                "id": 77,
                    "pId": -1
            },
                "children": [{
                "data": "tags",
                    "attr": {
                    "id": 30,
                        "pid": 0
                }
            }, {
                "data": {
                    "title": "branches"
                },
                    "attr": {
                    "id": 29,
                        "pid": 0
                }
            }]
        }]
    },
        "plugins": ["themes", "json_data", "checkbox", "ui"]
})

$("#getChecked").click(function () {
    $("#tree").jstree("get_checked", null, true).each(function (i, e) {
        console.log($(this).attr("id"))
    });
});

Demo: http://jsfiddle.net/IrvinDominin/RYhgD/

Docs: http://www.jstree.com/documentation/json_data

Thank you very much for your valuable suggestion. The problrleme has been resolved now. — Shibankar, Aug 17 '13 at 16:46

Get Checked Element in JQuery JStree

1 Answers1