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 load a Chart from the database I can recreate the elements and endpoints with my addElement and my addEndpoint function. 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

so my question is, how can I prevent the creation of new Endpoints each time I call the connect method?

Answer 1

This is a really old question, but figured I'd share a way that doesn't involve using UUIDs:

var endpoint1 = jsPlumb.getEndpoints("id of node1")[0];
var endpoint2 = jsPlumb.getEndpoints("id of node2")[0];
jsPlumb.connect({source: endpoint1, target: endpoint2});

Note that this works best when you have 1 endpoint per node, but if you can filter the array returned by getEndpoints to find the desired endpoint, this would work as well.

Answer 2

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"] });
});