Trying to reload the diagram

GoJS
1

Below is my code…
when i click on a button it generates the diagram perfectly but when i click on that button again it says …Error: Invalid div id; div already has a Diagram associated with it…could you please tell me what am i doing wrong…i tried using Diagram.div = null;
but its not working at all.
Thanks

var $1 = go.GraphObject.make;
myDiagram = $1(go.Diagram, “myDiagramDiv”,
{
initialContentAlignment: go.Spot.Center,
“undoManager.isEnabled”: true,
allowDragOut: false
});
myDiagram.nodeTemplate =
$1(go.Node, “Auto”,
$1(go.Shape, “Ellipse”, { strokeWidth: 5 },
new go.Binding(“fill”, “color”)),
$1(go.TextBlock, { margin: 8 },
new go.Binding(“text”, “key”))
);
var linkDataArray = [];
var linkerData = [];

  for (var i = 0, j = 0; i < Session.get('gojsname1').length, j < Session.get('gojsname2').length; i++, j++) {
      linkDataArray.push({ key: Session.get('gojsname1')[i], color: "orange" }, { key: Session.get('gojsname2')[j], color: "orange" });
      linkerData.push({ from: Session.get('gojsname1')[i], to: Session.get('gojsname2')[j] });
  }

  for (var iter = 0; iter < linkDataArray.length; iter++) {
      for (var innerIter = 0; innerIter < linkDataArray.length; innerIter++) {

          if (iter != innerIter) {
              if (linkDataArray[iter].key == linkDataArray[innerIter].key) {
                  linkDataArray.splice(innerIter, 1);
              }
          }
      }
  }
  myDiagram.model = new go.GraphLinksModel(
      linkDataArray, linkerData
  );
2

That’s right – you need to set myDiagram.div = null before creating a new Diagram using the same DIV element.

3

Ohk it is working thanks. :)

4

Thanks for solution walter… But will u please mention where exactly we need to clear the div… In my case iam getting empty div after reloading…since iam clearing the div just before creating my diagram.modal

5

Are you trying to replace the diagram entirely, or just the model? If you just want to use a new model, you don’t need to set myDiagram.div = null, you can just set Diagram.model to the new model.

6

Hi …iam trying to create diagram…with same name and inserting in same div… But each time I am calling same java script function by passing diff values for nodes and links… So,on first call iam able to view diagram…on second call iam facing an error "Error: Invalid div id; div already has a Diagram associated with it. "… Then I tried with diagram.div =null … But This is clearing the diagram before displaying…

7

How does what you’re doing differ from the replaceDiagram function in this codepen?

8

I am getting the same error when I re rendering the same diagram div and overview div

My code is
myOverview = $(go.Overview, 'project_overview', { observed: diagram, contentAlignment: go.Spot.Center });

if I remove this overview div code, everything works fine.

and my error is
Error: Invalid div id; div already has a Diagram associated with it.

9

At that time there already is a Diagram associated with that HTML DIV element.

You can disassociate it by setting Diagram.div to null on that Diagram.

In the unlikely case that you no longer have a reference to that Diagram, you can call the static function Diagram.fromDiv.

10

I wrote

var projectDiagramDiv = document.getElementById("project-diagram");
var projectDiagram = go.Diagram.fromDiv(projectDiagramDiv);
if(projectDiagram){
      projectDiagram.div = null;
 }

and it is not working. is there anything to do with overview div, similar to this?

11

Why are you looking at the DIV whose id is "project-diagram"?

Your code that was causing an error used:

12

“project-diagram” is the id of the div for the diagram.
“project_overview” is to display the overview of the diagram.