Использование jsPlumb с динамическим контентом

Question

Плохо попробуйте пользователь jsPlumb: Блок-схема в динамическом контенте MySQL.

Мой код основан на демонстрационном примере для Flowchart: JQuery
им генерировать мои Endpoints в моей базе данных запроса

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

и им добавить его в мое содержание в конце содержимого базы данных

$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>'; 

все, что находится в пределах функции

структура HTML/CSS показывает правильно, но он выиграл t показать мои конечные точки.
Я включил все необходимые файлы js/css, как я сказал им, используя DEMO в качестве подвала для моего кода.

Мое сообщение об ошибке:

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

Линия в РОМ адаптера ошибка в отношении:

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

Answer 1

Найдена моя ошибка:

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

Задаваемые мой Endpoints нравится, что

объекты имел один и тот же идентификатор

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

, но должен быть:

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

Это была просто удача найти его, потому что я не подозревал об ошибке в этой части

Answer 2

Код в вопросе содержит только функцию & определения переменных, не казни, которые на самом деле создать конечные точки/соединение.

Как видно в исходном коде jsPlumb демо: https://jsplumbtoolkit.com/demo/home/demo.js

Соединение переводит вызовы отсутствуют.

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

Эти вызовы отсутствуют, которые используются в демо для создания соединения & делают соответствующие конечные точки.