Save data to database

[pm4698]

Hello there,

I started using orgchart to see how it works. I used this example/theme:
https://balkangraph.com/OrgChartJS-Demos/CustomTemplateCool.html

What i need is when someone drags/drops elements then data is automatically being saved to a database. I know how to send/save data using ajax but i don't know if there is a ready function/suggested way to loop through all nodes and get information like id and order to save it to an array and use it through ajax.

Thank you in advance

[ZornitsaPesheva]

You can see here our example for ASP.NET MVC:
https://github.com/BALKANGraph/OrgChartWebApp

[pm4698]

Ok, i use PHP and i am loading data from database and its working like a charm. What i need is when performing drag/drop to drop data through ajax and save the new order into my database.

From your example i saw this:

chart.on('update', function (sender, oldNode, newNode) { $.post("@Url.Action("UpdateNode")", newNode) .done(function () { sender.updateNode(newNode); }); return false; });

Is there a parameter in the orgchart to be something like: chart.on ('dragdrop'......) ? Also, if not using .NET can you provide an example of how to loop all nodes to save data into arrays? like old node array and new node array?

[ZornitsaPesheva]

hi pm4698,

Drag and drop is triggering the update event, so you ca use it to save your data.

[pm4698]

Thanks for the info. So the on update event holds 3 variables: sender, oldNode, newNode. These variables are global? Can you provide a jQuery/Javascript loop example where we loop through all nodes to get new and old Nodes?

[ZornitsaPesheva]

When you drag and drop a node, you don't need the all nodes data. You just need the newNode and you have to save the data in the function of this event.

chart.on('update', function (sender, oldNode, newNode) {
          // find the id of the newNode in the database and save the data
        });

[pm4698]

So can you tell me within a line what is what?
Per example:
sender: node's id
oldNode: node's old parent id
newNode: node's new parent id

Thank you in advance

[ZornitsaPesheva]

Where is this from?

[pm4698]

chart.on('update', function (sender, oldNode, newNode) { // find the id of the newNode in the database and save the data });

The above event has 3 variables:sender, oldNode and newNode. What is each of this 3 variables?for a node which is the sender, which ia the oldNode and which the newNode?

[ZornitsaPesheva]

sender is the chart (OrgChart object)
oldNode - the node data before moving (with the old paren id)
newNode - the node data after moving (with the new parent id)

[pm4698]

So sender is lets say object's id, oldNode is object's previous pid and newNode is object's new pid?

[ZornitsaPesheva]

No, to understand better , you can do this:

        chart.on('update', function (sender, oldNode, newNode) { 
            console.log(sender);
            console.log(oldNode);
            console.log(newNode);
        });

[pm4698]

Thank you very much for your assistance! I used console.dir to check sender, oldNode and newNode and eventually moving object's id is newNode.id and new parent is newNode.pid. I use these 2 variables to update my database and its working like a charm!

Many thanks!