Infinity8 Infinity8 - 3 months ago 30
HTML Question

Populate text field from JsTree selection

I am trying to figure out a way to pass the selection from JSTree to a basic HTML form. (Which is then used by Flask & Wtforms). I've been able to pass it to the console log but then am not sure how to bring this back to the form.

Relatively new to JS so take it easy on me, but I am stumped on how to do this.

<label for="folderpath">Folder Path:</label>
<input type="text" id="folderpath" name="folderpath" value="">
<br>
<div id="container"></div>

<script id="jstree1" name="jstree1">

$('#container').jstree({

'core': {
"themes": {
"name": "default",
"dots": true,
"icons": true

},
'data': {
'url': "static/JSONData.json",
'type': 'GET',
'dataType': 'JSON',
}
}
});var folderpath =
$('#container').on("changed.jstree", function (e, data) {
console.log(data.instance.get_selected(true)[0].text);
});
</script>


EDIT
I tried using #folderout. But it would not work when using an input type="text" tag.

<label for="folderout">Folder Path</label>
<input type="text" name="folderout" class="form-control" id="folderout" >

$("#container").on("select_node.jstree", function (evt, data) {
var number = data.node.text
$('#folderout').html(number);

Answer
 <label for="folderout">Folder Path</label>
 <input type="text" name="folderout" class="form-control" id="folderout" >

<script id="jstree1" name="jstree1">

                                $('#container').jstree({
                                    'core': {
                                        "themes": {
                                            "name": "default"
                                            , "dots": true
                                            , "icons": true
                                        }
                                        , 'data': {
                                            'url': "static/JSONData.json"
                                            , 'type': 'GET'
                                            , 'dataType': 'JSON'
                                        }
                                    }
                            });
{ /*  --- THIS IS FOLDER SELECTOR FOR ID "folderout" --- */
$("#container").on("select_node.jstree", function (evt, data) {
var number = data.node.text
document.getElementById("folderout").value = number;  });};
</script>

The last part here did the trick. Converting the data.node.text to a variable. Then bringing the variable into html with getElementById. Now when you click a node it will populate that text field.