Checkbox JSTree as part of a Form

[Alexander]

Hi Everybody,

I'm using JSTree in a form ans want the 'id' of the selected element /
elements posted to the server.

My code looks like this:

[code]
<script type="text/javascript" src="/src/jsTree/lib/jquery.js"></
script>
<script type="text/javascript" src="/src/jsTree/lib/
jquery.cookie.js"></script>
<script type="text/javascript" src="/src/jsTree/lib/
jquery.hotkeys.js"></script>
<script type="text/javascript" src="/src/jsTree/lib/
jquery.metadata.js"></script>
<script type="text/javascript" src="/src/jsTree/lib/
sarissa.js"></script>
<script type="text/javascript" src="/src/jsTree/
jquery.tree.js"></script>
<script type="text/javascript" src="/src/jsTree/
plugins/jquery.tree.checkbox.js"></script>
<script type="text/javascript" src="/src/jsTree/
plugins/jquery.tree.contextmenu.js"></script>
<script type="text/javascript" src="/src/jsTree/
plugins/jquery.tree.cookie.js"></script>
<script type="text/javascript" src="/src/jsTree/
plugins/jquery.tree.hotkeys.js"></script>
<script type="text/javascript" src="/src/jsTree/
plugins/jquery.tree.metadata.js"></script>
<script type="text/javascript" src="/src/jsTree/
plugins/jquery.tree.themeroller.js"></script>
<script type="text/javascript" src="/src/jsTree/
plugins/jquery.tree.xml_flat.js"></script>
<script type="text/javascript" src="/src/jsTree/
plugins/jquery.tree.xml_nested.js"></script>
<div id="container">
<script type="text/javascript" class="source">
$(function () {
$("#demo_1").tree({
callback : {
onselect : function(node, tree_obj) {
$('#form_node_id').val( $(node).attr
('id') )
}
},
ui : {
theme_name : "checkbox"
},
plugins : {
checkbox : { }
}

});
});

</script>
<form id="new" action="/src/test.py/index" method="post"
enctype="multipart/form-data">
<div class="demo" id="demo_1">
<ul>
<li id="1"><a href="#"><ins>&nbsp;</ins>Root node 1</a>
<ul>
<li id="2"><a href="#"><ins>&nbsp;</ins>Child node
1</a></li>
<li id="3"><a href="#"><ins>&nbsp;</ins>Child node
2</a></li>
<li id="4"><a href="#"><ins>&nbsp;</ins>Some other
child node with longer text</a></li>
</ul>
</li>
<li id="5"><a href="#"><ins>&nbsp;</ins>Root node 2</a></
li>
</ul>

</div>
<script type="text/javascript" class="source">
var tmp = jQuery.tree.plugins.checkbox_get_checked("#demo_1");
alert(tmp);
</script>
<input type="submit" value="Submit">
</form>
</div
[/code]

But I don't get any value out of this...
I also tried the callback onchange with the same parameter but there
was no difference.

Can anybody help me with this?

Greetings
Alexander

[vakata]

Hi,

Try this:

jQuery.tree.plugins.checkbox.get_checked("#demo_1");

Kindest regards,
Ivan

[Alexander]

And where do I have to implement this?

[vakata]

in the onsubmit event of the form for example ...

[Alexander]

Hi Ivan,

thanks for your help.
But now I've got an errormessage in the Error Console of Firefox:

t.container is undefined in jquery.tree.checkbox.js line 9
It's the line with the return:
[code]
get_checked : function (t) {
if(!t) t = $.tree.focused();
return t.container.find("a.checked").parent();
},
[/code]
What to do now?
My Form now looks like ths:
[code]

<form id="new" action="/src/test.py/index"

onsubmit='return jQuery.tree.plugins.checkbox.get_checked("#demo_1")'

method="post" enctype="multipart/form-data">
<div class="demo" id="demo_1">
<ul>
<li id="1"><a href="#"><ins>&nbsp;</ins>Root
node 1</a>
<ul>
<li id="2"><a href="#"><ins>&nbsp;</
ins>Child node 1</a></li>
<li id="3"><a href="#"><ins>&nbsp;</
ins>Child node 2</a></li>
<li id="4"><a href="#"><ins>&nbsp;</
ins>Some other child node with longer text</a></li>
</ul>
</li>
<li id="5"><a href="#"><ins>&nbsp;</ins>Root
node 2</a></li>
</ul>

</div>

<input type="submit" value="Submit">
</form>

[/code]

But I don't get the values out of the tree.

Thank You
Alexander

[vakata]

Ooops, sorry :)
You'd better use tree.reference to be on the safe side.

jQuery.tree.plugins.checkbox.get_checked(jQuery.tree.reference
("#demo_1"));

Did you try this one?
Cheers,
Ivan

[Alexander]

hmmm now I tried your new solution but I get the same error ("T is
undefined") can you post a real small example how to use this? Maybe
I'm only a litle bit stupid....
Greetings
Alexander

[vakata]

Hi,

well, I am not really sure what went wrong. All you need to do is:
1) open:
http://jstree.com/demo/checkbox

2) check a node in the top tree

3) run this piece of code (for example using firebug or simply modify
this example file in your download):
$.tree.plugins.checkbox.get_checked($.tree.reference("#demo_1"));


Kindest regards,
Ivan

[Alexander]

Hmmm well.... I think I'm to studip to use it as part of a form...

If I have the page with the tree on it I chek an item and then in
firebug enter
$.tree.plugins.checkbox.get_checked($.tree.reference("#demo_1"));
i gert the values of the checked items but I cant return them like in
a normal form.

Can somebody post a working example which uses the tree as a form and
transmit the data to another website?

Greetings Alexander

[vakata]

Well, which value do you need?
For example if collecting IDs:

var checked_ids = [];
$.tree.plugins.checkbox.get_checked($.tree.reference("#demo_1")).each
(function () {
checked_ids.push(this.id);
});
$("#my-hidden-input-field").val(checked_ids.join(","));

This will populate the my-hidden-input-field with the comma separated
list of checked nodes.

Kindest regards,
Ivan

[Alexander]

I've got it!!!!!!

the right way is:

function submitform() {
var checked_ids = [];
$.tree.plugins.checkbox.get_checked($.tree.reference

("#demo_1")).each
(function () {
checked_ids.push(this.id);
});

document.new.systems.value = checked_ids.join(",");
return true;
}

and in the Form header onsubmit='return submitform()'

then you will get the right data out of the tree!!!!

Many Thanks!!!

[Kris]

Hello, 

This one work too :

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>jsTree test</title>

  <!-- 2 load the theme CSS file -->

  <link rel="stylesheet" href="dist/themes/default/style.min.css" />

</head>

<body>

  <!-- 3 setup a container element -->

  <div id="jstree">

    <!-- in this example the tree is populated from inline HTML -->

    <ul>

      <li id="1">Root node 1

        <ul>

          <li id="2">Child node 1</li>

          <li id="3">Child node 2</li>

        </ul>

      </li>

      <li id="4">Root node 2</li>

    </ul>

  </div>

<form method=get onsubmit='return submitform()'>

<input type="hidden" id="myField" name="selectedValue" value="" />

<input type="text" name="firstname">

<input type="submit" value="Submit">

</form>

  <!-- 4 include the jQuery library -->

  <script src="dist/libs/jquery.js"></script>

  <!-- 5 include the minified jstree source -->

  <script src="dist/jstree.min.js"></script>

  <script>

  var tst;

  $(function () {

  var checked_ids = [];

    // 6 create an instance when the DOM is ready

    $('#jstree').jstree({'plugins':["wholerow","checkbox"]});

    // 7 bind to events triggered on the tree

    $('#jstree').on("changed.jstree", function (e, data) {

      console.log(data.selected);

      checked_ids.push(data.selected);

tst=data.selected;

document.getElementById('myField').value = tst;

    });

    // 8 interact with the tree - either way is OK

  });

     function submitform() { 

document.new.systems.value = tst; 

        return true; 

} 

  

    </script>

</body>

</html>