I currently have a template in django with the jsTree plugin working that updates/saves the JSON data when a user interacts with the data provided.
I can't figure out how to save this data into my database for a user so that it will retu the same JSON data/changes they've made when they retu to this page.
Below is the code I have ruing in the template. Javascript is included in the same file for ease of viewing at the moment.
{% extends "testapp/base.html" %}
{% block body_block %}
<div class="container">
<div class="row">
<h3>demo</h3>
<div class="col-md-4 col-sm-8 col-xs-8">
<button type="button" onclick="demo_create();">Create</button>
<button type="button" onclick="demo_rename();">Rename</button>
<button type="button" onclick="demo_delete();">Delete</button>
<button type="button" onclick="save_changes();">Save Changes</button>
</div>
</div>
<div class="row">
<div id="jstree_demo" class="demo" style="margin-top:1em; min-height:200px;">
</div>
</div>
</div>
<!-- This should probably be moved to another JS file at some point -->
<script>
var testData = ["Child 1", { "id" : "demo_child_1", "text" : "Child 2", "children" : [ { "id" : "demo_child_2", "text" : "One more", "type" : "file" }] }];
function save_changes(){
var updatedJSON = get_tree();
}
function get_tree(){
var v = $('#jstree_demo').jstree(true).get_json('#', {flat:true})
var mytext = JSON.stringify(v);
console.log ("Updated Json:");
console.log(mytext);
retu mytext;
}
function demo_create() {
var ref = $('#jstree_demo').jstree(true),
sel = ref.get_selected();
if(!sel.length) { retu false; }
sel = sel[0];
sel = ref.create_node(sel, {"type":"default"});
if(sel) {
ref.edit(sel);
}
console.log("Tree created:");
console.log(testData);
get_tree();
};
function demo_rename() {
var ref = $('#jstree_demo').jstree(true),
sel = ref.get_selected();
if(!sel.length) { retu false; }
sel = sel[0];
ref.edit(sel);
console.log("Renaming:");
console.log(testData);
get_tree();
};
function demo_delete() {
var ref = $('#jstree_demo').jstree(true),
sel = ref.get_selected();
if(!sel.length) { retu false; }
ref.delete_node(sel);
console.log("Deleting:");
console.log(testData);
get_tree();
};
$(function () {
var to = false;
$('#demo_q').keyup(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#demo_q').val();
$('#jstree_demo').jstree(true).search(v);
}, 250);
});
$('#jstree_demo')
.jstree({
"core" : {
"animation" : 0,
"check_callback" : true,
"themes" : { "stripes" : true },
'data' : testData
},
"plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow" ]
});
});
</script>
{% endblock %}
I found django-jsonfield which I believe should make this process much simpler https://github.com/bradjasper/django-jsonfield
However, after implementing the model below specified in the documentation, I am unsure of how to pass in the JSON data from the template with views and save it to the database.
from django.db import models
from jsonfield import JSONField
class MyModel(models.Model):
json = JSONField()
Thanks for any help.
