How do i refresh tree after tree changes are saved to DB?

[Keyur Padalia]

Hi Ivan,

I have 2 trees and when i drag a node from one to another i save the dragged node as 1 quantity in DB table and also set it as child node in DB table. Now i want to refresh the effected tree using AJAX so that it gets nodes from the DB table.

I tried below two codes but didn't work.

Code - 1

$.ajax({

url: "http://iec.ibwshops.com/products/pro_mapping",

cache: false

   }).done(function(html) {

$("#main_div").append(html);

   });

Code - 2

//    $(document).ready(function() {

// $(function() {

//    $('#catproform').submit(function(e) {

// e.preventDefault();

// var form = $(this);

// var post_url = form.attr('action');

// var post_data = form.serialize();

// $.ajax({

//    type: 'POST',

//    url: post_url,

//    data: post_data,

//    success: function(msg) {

// $(form).fadeOut(800, function() {

//    form.html(msg).fadeIn().delay(2000);

//

// });

//    }

// });

//    });

// });

//    });

[Ivan Bozhanov]

If jstree makes the AJAX call for getting the tree data for you (depending on how it is configured) you can do this:
$('#main_div').jstree(true).refresh(); // use this if you configured "url" in the core.data config section

If you make your call manually then you need to destroy the current tree and create it again:
.done(function (data_from_server) {
  $('#main_div').jstree("destroy").jstree({ core : { data : data_from_server, ... // rest of your config
});

Best regards,
Ivan

[Keyur Padalia]

Thanks Ivan,

Its working, I have used this code

$cat_pro = koolajax.callback(gen_cat_pro_tree("okok"));
$('#cat_products_tree').jstree("destroy").jstree({core: {data: $cat_pro}});

But problem is the tree is not keeping it's open state and it's closed when it loads.

Can you tell me how to fix this.

[Ivan Bozhanov]

If you had gone with .refresh() the state would have been kept and reapplied. Since you are recreating the tree I would suggest going with the "state" plugin - just add "state" to your plugins config array.

Best regards,
Ivan

[Keyur Padalia]

Hi Ivan,

I am using this below code to reload tree after destroying it, as you told me i have inserted "state" into plugin but it's not remembering the open node's state.

// this lone below gets the data for tree in ul-li format
$cat_pro = koolajax.callback(gen_cat_pro_tree("okok"));

 $('#cat_products_tree').jstree("destroy").jstree({

    "state": {"key": "cat_products_tree_data"},
    "core": {
 data: $cat_pro,
 "check_callback": function(operation, node, node_parent, node_position, more) {


    // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
    // in case of 'rename_node' node_position is filled with the new node name
    // Check if node is dragged from same tree


    if (operation == "move_node")
    {
 $destination_category = node_parent.li_attr["class"];
 $parent_tree_value = node.id.substr(0, 2);


 // Preventing Internal Drag n Drop
 if ($parent_tree_value == "j1")
    return false;


 // Preventing Internal Drag n Drop
 if ($destination_category != "category" && $destination_category != "product")
    return false;
 else
 {
    // Get Product's ID where items are been dropped
    $pro_id = node_parent.li_attr["pro_id"];


    // Gets Node where items are been dropped
    $node_id = node_parent.id;
    this.deselect_all();
    this.select_node(node_parent.id);


    this.open_node(node_parent.id);
    return true;
 }
    }
    else if (operation == "delete_node")
    {
 $destination_category = node.li_attr["class"];
 if ($destination_category != "supplier" && $destination_category != "category")
 {
    if (node.li_attr.item_qty == null)
    {
 return false;
    }
    if (confirm("Do you really want to delete \n" + $destination_category + " : '" + this.get_node(node.id).text + "' !") == true)
    {
 $node_pro_id = node.li_attr.pro_id;
 $node_sku = node.li_attr.item_sku;
 $node_qty = node.li_attr.item_qty;


 // Call AJAX function for deleting  the item from c_products_has_items
 koolajax.callback(delete_pro_item($node_pro_id, $node_sku, $node_qty));


 return true;
    }
    else {
 return false;
    }
 }
 else
    return false;
    }
    else if (operation == "copy_node")
    {
 $item_sku = node.li_attr.item_sku;
 $item_id = node.li_attr.item_id;
 node.li_attr.pro_id = $pro_id;


 if ($item_sku == "" || $item_sku == null)
 {
    alert("SKU for this item is missing!");
    return false;
 }


 // Add this item in c_products_has_items table with 1 qty
 if ($pro_id != 0 || $pro_id != "")
 {
    koolajax.callback(new_item_pro_qty($pro_id, $item_id, $item_sku, "1"));
 }
 return true;
    }
 },
 "expand_selected_onload": true,
 "themes": {"stripes": true}
    },
    "plugins": ["dnd", "state", "contextmenu"]


 });

[Ivan Bozhanov]

The state plugin stores the IDs of opened nodes and the IDs of selected nodes. If the new data you insert in the tree has the same IDs those will be reopened and reselected as you need. Does $cat_pro have IDs?

[Keyur Padalia]

No ivan they are just list of ul-li html to generate tree with product id, item id and sku as html attributes.

Now i am trying this after creating tree:

$("#cat_products_tree").jstree(true).save_state();
$("#cat_products_tree").jstree(true).restore_state();

but still it doesn't work 

[Ivan Bozhanov]

As I said - you need IDs, without IDs it won't work.