get checked values for jsTree - submit with form post

Question

I'm using the jsTree jQuery plugin with the checkbox theme. Does anyone know how to get the selected values with a form post?

Thank you!

Answer 1

In the last version (3.0), the API was changed.

If you need just array of selected IDs (like in examples in this node), it is now very easy:

var selectedElmsIds = $('#tree').jstree("get_selected");

If you need to iterate over the selected elements, you just need to pass additional "true" parameter.

var selectedElmsIds = [];
var selectedElms = $('#tree').jstree("get_selected", true);
$.each(selectedElms, function() {
    selectedElmsIds.push(this.id);
});

Answer 2

The suggested solution from google groups however didn't work for partially checked nodes, in my case. I had to leave the get_checked out and do the following to get fully selected and partially selected nodes.

$(".sector-tree").find(".jstree-undetermined").each(function(i,element){            
    checked_ids.push($(element).attr("id"));

    if ($(this).find(".jstree-undetermined").length == 0) {  
        $(this).find(".jstree-checked").each(function(i, element){          
            checked_ids.push({$(element).attr("id"));
        });         
    }
});

// collect the rest of the checked nodes that exist under checked parents
$(".sector-tree").find(".jstree-checked").each(function(i, element){ //also includes the ones below 'undetermined' parent

    var selectedElement = $(element).attr("id");
    if ( hasItem(selectedElement, checked_ids ) < 0 ) {             
        checked_ids.push(selectedElement);
    }

}); 

Answer 3

Everyone, who worked with Jstree’s may face to this question: How to get the checked Ids of Jstree in form submit? here is the solution:

function submitMe() {
    var checked_ids = [];
    $('#your-tree-id').jstree("get_checked",null,true).each(function(){
        checked_ids.push(this.id);
    });
    //setting to hidden field
    document.getElementById('jsfields').value = checked_ids.join(",");
}

Now, we set it in a hidden field:

<input type="hidden" name="jsfields" id="jsfields" value="" />