jsplumb.connect() use existing endpoints instead of creating new

Question

I have an issue with the jsPlumb.connect function. I have an application where a user can add <div> elements, which gets jsPlumb endpoints. The User can connect all these elements with each other. The chart can be saved in a MySQL Database (in JSON Format).

When the User loads a Chart from the database I can recreate the elements and endpoints with my addElement and addEndpoint functions. But when I call the jsPlumb Connect method (which is just called for the creation of the chart from the database) to draw the connection lines it creates a new endpoint for every connected element.

How can I prevent the creation of new Endpoints each time I call the connect method?

Answer 1

At the time of adding endpoints make sure that you also assign them uuid based on the element it is placed on. You can connect two endpoints in jsPlumb as:

jsPlumb.ready(function () {  
     var e0 = jsPlumb.addEndpoint("container0",{uuid:"ep0"}), //set your own uuid for endpoint to access later.
     e1 = jsPlumb.addEndpoint("container1",{uuid:"ep1"});  
     jsPlumb.connect({ uuids:[e0.getUuid(),e1.getUuid()] }); 
             // (or) 
     jsPlumb.connect({ uuids:["ep0","ep1"] });
});