I have a jstree that I am using to manage a work breakdown structure. The desired functionality is that the user clicks on the node and an modal pops up with a form text field in it. The user then can rename the node. When they submit the form within the modal, the tree refreshes with the new name. Everything I have works up to the point where the tree refreshes. When the tree refreshes... the modal closes but reopens. I believe unbinding the click event from the node is what needs to happen? Here is the code.
select node click event
$('.activity_div').on("select_node.jstree", function (e, data) {
var val = data.node.id;
var act_id = val.substr(val.indexOf("_") + 1);
//alert("node_id: " + data.node.id);
$.ajax({
url: 'cfc/cfc_wbs.cfc?method=func_get_activity_code_details&returnformat=json',
type: 'post',
dataType: 'json',
data: {
est_id: estimate_id,
act_id: act_id
},
success: function(data){
if(data && data.length) {
var html = "";
$.each(data, function(i, val) {
var status = data[i].status;
var message = data[i].message;
var text = data[i].text;
var id = data[i].id;
var node = data[i].node;
if (status == 'SUCCESS'){
$('#edit_modal').modal();
$('#node_text').val(text);
$('#node_id').val(id);
$('#node').val(node);
}
})
}
},
error: function (xhr, ajaxOptions, thrownError) {
var errorMsg = 'Ajax request failed: ' + xhr.responseText;
$('#content').html(errorMsg);
}
});
});
Modal form submit event
// FORM VALIDATION
$('#form_activity_code').validate();
// EDIT FORM SUBMISSION
$('#form_activity_code').on('click', '.btn-node-submit', function (e) {
if($("#form_activity_code").valid()){
var node_id = $('#node_id').val();
var node = $('#node').val();
var node_text = $('#node_text').val();
$.ajax({
url: 'cfc/cfc_wbs.cfc?method=func_update_activity_codes&returnformat=json',
type: 'post',
dataType: 'json',
data: {
act_id: node_id,
est_id: estimate_id,
node_text: node_text,
node: node
},
success: function (data) {
if(data && data.length) {
var html = "";
$.each(data, function(i, val) {
var status = data[i].status;
//var message = data[i].message;
//var activity = data[i].activity;
//var activity_date_time = data[i].activity_date_time;
//var person = data[i].person;
//var user = data[i].user;
if (status == 'SUCCESS'){
$('#activity_codes_div').jstree(true).settings.core.data = data;
$('#activity_codes_div').jstree(true).refresh();
$('#edit_modal').modal('toggle');
return false;
} else {
}
});
}
}
});
} else {
}
});
You can hide the modal by using the event refresh.jstree
$("#activity_codes_div").on("refresh.jstree",function(){
$('#edit_modal').modal('hide');
});
as what looks like is that the line $('#activity_codes_div').jstree(true).refresh(); is preventing the bootstrap modal dialog to close for somewhat reason instead of the problem you that you think is with the select node event if you remove the above line from the $('#form_activity_code').on('click', '.btn-node-submit', function (e) { event you will see that the modal hides and works properly.
Using the event refresh.jstree for hiding the modal solves the problem see the working fiddle
or a snippet below
var data = [{
"state": {
"opened": true
},
"text": "engineering",
"icon": "fa fa-circle-o",
"children": [{
"state": {
"opened": true
},
"text": "piping",
"icon": "fa fa-dot-circle-o",
"children": [{
"state": {
"opened": true
},
"text": "stainless steel",
"icon": "fa fa-dot-circle",
"children": [{
"state": {
"opened": true
},
"text": "small bore",
"icon": "fa fa-billseye"
}]
}]
},
{
"state": {
"opened": true
},
"text": "structural",
"icon": "fa fa-dot-circle-o",
"children": []
},
{
"state": {
"opened": true
},
"text": "civil",
"icon": "fa fa-dot-circle-o",
"children": [{
"state": {
"opened": true
},
"text": "deep foundations",
"icon": "fa fa-dot-circle",
"children": []
}]
}
]
},
{
"state": {
"opened": true
},
"text": "procurement",
"icon": "fa fa-circle-o",
"children": [{
"state": {
"opened": true
},
"text": "piping",
"icon": "fa fa-dot-circle-o",
"children": [{
"state": {
"opened": true
},
"text": "stainless steel",
"icon": "fa fa-dot-circle",
"children": [{
"state": {
"opened": true
},
"text": "small bore",
"icon": "fa fa-billseye"
}]
}]
},
{
"state": {
"opened": true
},
"text": "structural",
"icon": "fa fa-dot-circle-o",
"children": []
},
{
"state": {
"opened": true
},
"text": "civil",
"icon": "fa fa-dot-circle-o",
"children": []
}
]
}
]
$('.activity_div').on("select_node.jstree", function(e, data) {
var val = data.node.id;
var act_id = val.substr(val.indexOf("_") + 1);
//alert("node_id: " + data.node.id);
$('#edit_modal').modal();
return false;
});
$("#activity_codes_div").on("refresh.jstree", function() {
$('#edit_modal').modal('hide');
})
// EDIT FORM SUBMISSION
$('#form_activity_code').on('click', '.btn-node-submit', function(e) {
e.preventDefault();
$('#activity_codes_div').jstree(true).settings.core.data = data;
$('#activity_codes_div').jstree(true).refresh();
return false;
});
$('#activity_codes_div').jstree({
'core': {
'data': data,
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Activity Codes</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div id="activity_codes_div" class="activity_div"></div>
</div>
</div>
</div>
<!--- /////////////////////////////// EDIT MODAL ///////////////////////////////////// --->
<div class="modal inmodal" id="edit_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<div id="approve_image"><i class="fa fa-sitemap modal-icon"></i></div>
<h4 class="modal-title" id="requisition_description">Edit Activity Code</h4>
<small>Edit </small>
<h6 class="modal-title" id=""></h6>
</div>
<form id="form_activity_code">
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Node Desciption</label>
<input name="text" type="text" placeholder="Enter node description" class="form-control required" id="node_text">
</div>
</div>
</div>
<input type="hidden" name="node_id" id="node_id" value="0">
<input type="hidden" name="node" id="node" value="0">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white approve_close_modal" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-node-submit">Edit</button>
<button type="button" class="btn btn-danger delete">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>