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