My requirement is like, I am adding two endpoints using jsplumb.addEndPoint for two containers named 'container0' and 'container1'.

Now I need to link the two end points using a connector programmatically but the jsplumb.connect creates a new endpoint and connecting and is not using the end point which I have created using jsplumb.addEndpoint .

How could I connect these two end points? Also I just want to add a connection if the connection is not already there for the end points?

My requirement is like, I am adding two endpoints using jsplumb.addEndPoint for two containers named 'container0' and 'container1'.

Now I need to link the two end points using a connector programmatically but the jsplumb.connect creates a new endpoint and connecting and is not using the end point which I have created using jsplumb.addEndpoint .

How could I connect these two end points? Also I just want to add a connection if the connection is not already there for the end points?

• javascript
• jsplumb

2 Answers 2

To connect using already existing endpoints you can make use of the Uuid's of the endpoints:

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

According to the API jsPlumb.connect() can receive

array of UUIDs of the two Endpoints

but it's not the only way to connect endpoints as there's also another way (which is more mon as it's used to connect two objects) with source and target parameters who can receive String or Object (as a DOM object) or directly an Endpoint (which is not the same as a DOM selector of an endpoint, for instance it can be let firstEndpoint = jsPlumb.addEndpoint()).

So if, like me, you don't want to use universally unique identifier you can stick to classical source target and give endpoint as parameters.

jsPlumb.connect({ source: firstEndpoint, target: jsPlumb.selectEndpoints() });