jsPlumb can't connect to a container

Question

I try to use jsPlumb Community in my ASP.Net MVC 5 app.
But it writes Cannot establish connection - source does not exist. And I can't understand why? Below my page:

@section AddToHead {
    <script src="@Url.Content("~/Scripts/jsPlumb-2.2.8.js")" type="text/javascript"></script>
}

<script type="text/javascript">

    jsPlumb.ready(function () {
        var container = jsPlumb.setContainer($("#StagesSchemeContainer"));
        var endPoint = jsPlumb.addEndpoint("StagesSchemeEndpoint");
        jsPlumb.connect({ source: container, target: endPoint });
    });
</script>

<div id="StagesSchemeContainer">
    <div id="StagesSchemeEndpoint">

    </div>
</div>

I have these IDs, why is it write me that it doesn't exist?

Answer 1

According to the docs, source and target should both be endpoints. You only added the target as an endpoint.

Didn't test, but it should be something like:

jsPlumb.ready(function() {

    var container1 = jsPlumb.setContainer("StagesSchemeContainer");
    var endPoint1 = jsPlumb.addEndpoint("StagesSchemeEndpoint1");
    var endPoint2 = jsPlumb.addEndpoint("StagesSchemeEndpoint2");
    jsPlumb.connect({ source: endPoint1, target: endPoint2 });
});

And of course you will need an additional div for the second endpoint

<div id="StagesSchemeContainer">
    <div id="StagesSchemeEndpoint1">

    </div>
    <div id="StagesSchemeEndpoint2">

    </div>
</div>