how to use javascript function (jstree) called by $(function())?

John B

unread,

Mar 5, 2018, 1:43:44 PM3/5/18

to brython

Hello. I understand how to import a javascript library using, for example,

jq = window.jQuery

But I do not understand how to import a javascript library like jstree that does not provide a library name. A simple call to jstree in the body of a html page would be:

<body> <div id="tree_div"> <ul> <li>Root node 1 <ul> <li id="child_node_1">Child node 1</li> <li>Child node 2</li> </ul> </li> <li>Root node 2</li> </ul> </div> <button>demo button</button>

 <script src="dist/libs/jquery.js"></script> <script src="dist/jstree.min.js"></script> 
 <script> tree1 = $(function () {
 $('#tree_div').jstree();
 }); </script>
</body>


I can load the object tree1 in brython via tree1 = window.tree1, but it does not have functionality. That is, no methods are exposed as far as I can tell. `tree1` has attributes ['0', 'length'], 
and tree1['0'] has attributes ['$brython_id', 'jQuery331087540390626656961', 'location']. The jquery attribute has attributes like 'event' and 'handle'.

Alternatively, I can use this in the html instead:  
<script> tree2 = $('#tree_div').jstree();</script>

and then tree2 does have methods to call via Brython. But I don't understand how to bind events to it. In javascript, you would use something like:

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

But in Brython, the following has no effect:

def on_tree_change(evt):
 alert ("tree changed")
document['tree_div'].bind("changed.jstree", on_tree_change) 

   

Nor does document['tree_div'].bind("changed", on_tree_change) have any effect.  

I imagine the solutions are very simple, but I'm not sure how to get this javascript tree library working with Brython. Any suggestions?

John B

unread,

Mar 5, 2018, 3:55:27 PM3/5/18

to brython

I should have also said that jstree is a jQuery plugin.

Pierre Quentel

unread,

Mar 5, 2018, 3:55:48 PM3/5/18

to brython

The example on the jstree home page can be adapted to Brython :

<script type="text/python">
from browser import window, console

jq = window.jQuery

def ready(ev):
    # 6 create an instance when the DOM is ready
    jq('#jstree').jstree()

    # 7 bind to events triggered on the tree
    def changed(e, data):
        console.log(data.selected)
    jq('#jstree').on("changed.jstree", changed)

    # 8 interact with the tree - either way is OK
    def click(ev):
        jq('#jstree').jstree(True).select_node('child_node_1')
        jq('#jstree').jstree('select_node', 'child_node_1')
        jq.jstree.reference('#jstree').select_node('child_node_1')

    jq('button').on('click', click)

jq(ready)
</script>

There is no direct mapping between the result of jQuery $("elt_id") and Brython's document["elt_id"], nor between $(elt_id).on(event, function) and document[elt_id].bind(event, function).

Hope this helps

Reply all

Reply to author

Forward