结合使用jsPlumb和动态内容

Question

ill try to user jsPlumb:Flowchart within MySQL based dynamic content.

My Code is based on the Demo example for Flowchart:jQuery
im generating my Endpoints within my Database query

$plumb .= '_addEndpoints("drag'.$id_kurs.'", ["TopCenter", "BottomCenter", "LeftMiddle", "RightMiddle"]);

and im adding it to my content at the end of the Database content

$vorschau .= '      </div>
                    </DIV>

                    <script>
                            jsPlumb.ready(function() {
                                    var instance = jsPlumb.getInstance({
                                        DragOptions : { cursor: "pointer", zIndex:2000 },

                                        ConnectionOverlays : [
                                            [ "Arrow", { location:1 } ],
                                            [ "Label", { 
                                                location:0.5,
                                                id:"label",
                                                cssClass:"aLabel"
                                            }]
                                        ],
                                    });

                                    var connectorPaintStyle = {
                                        lineWidth:2,
                                        strokeStyle:"#db0018",
                                        joinstyle:"round",
                                        outlineColor:"white",
                                        outlineWidth:1
                                    },
                                    // .. and this is the hover style. 
                                    connectorHoverStyle = {
                                        lineWidth:2,
                                        strokeStyle:"#000000",
                                        outlineWidth:1,
                                        outlineColor:"white"
                                    },
                                    endpointHoverStyle = {
                                        fillStyle:"#000000",
                                        strokeStyle:"#db0019"
                                    },
                                    sourceEndpoint = {
                                        endpoint:["Rectangle",{ width:18, height:18}],
                                        paintStyle:{ 
                                            fillStyle:"#db0013"
                                        },
                                        maxConnections:999,     
                                        isSource:true,
                                        isTarget:true,
                                        connector:[ "Flowchart", { stub:[40, 60], gap:10, cornerRadius:5, alwaysRespectStubs:true } ],                                              
                                        connectorStyle:connectorPaintStyle,
                                        hoverPaintStyle:endpointHoverStyle,
                                        connectorHoverStyle:connectorHoverStyle,
                                        dragOptions:{}        
                                    },      
                                    init = function(connection) {           
                                        connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15));
                                        connection.bind("editCompleted", function(o) {
                                            if (typeof console != "undefined")
                                                console.log("connection edited. path is now ", o.path);
                                        });
                                    };          

                                    var _addEndpoints = function(toId, sourceAnchors, targetAnchors) {
                                            for (var i = 0; i < sourceAnchors.length; i++) {
                                                var sourceUUID = toId + sourceAnchors[i];
                                                instance.addEndpoint("flowchart" + toId, sourceEndpoint, { anchor:sourceAnchors[i], uuid:sourceUUID });                     
                                            }
                                    };                                                      

                                    instance.doWhileSuspended(function() {


                                        '.$plumb.'

                                        instance.bind("connection", function(connInfo, originalEvent) { 
                                            init(connInfo.connection);
                                        });         

                                        instance.bind("click", function(conn, originalEvent) {
                                            if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
                                                jsPlumb.detach(conn); 
                                        }); 

                                        instance.bind("connectionDrag", function(connection) {
                                            console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
                                        });     

                                        instance.bind("connectionDragStop", function(connection) {
                                            console.log("connection " + connection.id + " was dragged");
                                        });

                                        instance.bind("connectionMoved", function(params) {
                                            console.log("connection " + params.connection.id + " was moved");
                                        });
                                    });
                            });
                    </script>';

all of that is within an function

The HTML/CSS structure is showing correctly but it wont show my endpoints.
I have included all needed js/css files, as i said im using the DEMO as basement for my code.

My error message:

TypeError: el is null
...fsetTop, op = (relativeToRoot || (container != null && el.offsetParent != conta...

The Line within dom-adapter the error is relating to:

var l = el.offsetLeft, t = el.offsetTop, op = (relativeToRoot || (container != null && el.offsetParent != container)) ? el.offsetParent : null;

Answer 1

The code in question contains only function & variable definitions, no executions which actually create endpoints/connections.

As is visible in the source code of jsPlumb demo : https://jsplumbtoolkit.com/demo/home/demo.js

The connect calls are missing.

var connection1 = instance.connect({
        source:"window1", 
        target:"window2",               
        connector:["Bezier", { curviness:70 }],
        cssClass:"c1",
        endpoint:"Blank",
        endpointClass:"c1Endpoint",                                                    
...});

These calls are missing, which are used in the demo to create connections & render corresponding endpoints.

Answer 2

Found my mistake:

$plumb .= '_addEndpoints("drag'.$id_kurs.'"...

Defined my Endpoints like that

the objects had the same id

<div class="dragable" id="drag'.$id_kurs.'">

but is has to be:

<div class="dragable" id="flowchartdrag'.$id_kurs.'">   

It was just luck to find it, cause i didnt espect the mistake at this part