How to roll back nodes that could not be moved in jstree

Question

I am trying to figure out how to only roll back a node folder that has not been successfully ported. The code below is an example of what I'm trying to do. The problem occurs when you select a pair of folders and move them to another folder. If one of the directories cannot be moved, I want it to be able to return it to the original parent. Unfortunately, $.jstree.rollback(data.rlbk); rolls back all folders that were selected to their previous locations.

 $("#tree").jstree({...}).bind("move_node.jstree", function (e, data) { // process all selected nodes directory data.rslt.o.each(function (i) { // Send request. var move = $.parseJSON($.ajax({ url: "./jstree.php", type: 'post', async: false, data: { operation: "move_dir", .... } }).responseText); // When everything ok, the reponseText will be {success: true} // In all other cases it won't exist at all. if(move.success == undefined){ // Here I want to rollback the CURRENT failed node. // $.jstree.rollback(data.rlbk); will rollback all // of the directories that have been moved. } } }); 

Is there any way to do this?

Answer 1

I have studied using jstree before, but have not used it in my code. As a result, the code may be incorrect, but there must be concepts.

Based on your code, it looks like you are performing a move operation on the server side and want the tree to be updated to reflect the results.

Based on the jsTree documentation, it seems like you cannot make node updates and roll back to the last commit.

Instead of rolling back only those changes that you do not need, you can roll back the tree (all changes) and perform the following actions.

To better understand the code below, you can read it (or create a copy) without the lines where "wasTriggeredByCode" is set or specified in the condition for the if statement.

 $("#tree").jstree({...}).bind("move_node.jstree", function (e, data) { var jsTree = $(this); var successes = []; // Becomes true when function was triggered by code that updates jsTree to // reflect nodes that were successfully moved on the server var wasTriggeredByCode = false; // process all selected nodes directory data.rslt.o.each(function (i) { // I'm not certain that this is how the node is referenced var node = $(this); wasTriggeredByCode = (wasTriggeredByCode || node.data('redoing')); // Don't perform server changes when event was triggered from code if (wasTriggeredByCode) { return; } // Send request. var move = $.parseJSON($.ajax({ url: "./jstree.php", type: 'post', async: false, data: { operation: "move_dir", .... } }).responseText); if(move.success){ successes.push(node); } }); // Don't continue when event was triggered from code if (wasTriggeredByCode) { return; } // Roll back the tree here jsTree.rollback(data.rlbk); // Move the nodes for (var i=0; i < successes.length; i++) { var node = successes[i]; // According to the documentation this will trigger the move event, // which will result in infinite recursion. To avoid this you'll need // to set a flag or indicate that you're redoing the move. node.data('redoing', true); jsTree.move_node(node, ...); // Remove the flag so that additional moves aren't ignored node.removeData('redoing'); } });