Databases
StackOverflow2013
Postsdbo
POConnector Style not being applied to jsPlumb connector when created dynamically
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConnector Style not being applied to jsPlumb connector when created dynamically
    text
    copied!<p><strong>Update - 1</strong></p> <p>Here is <strong><a href="http://jsfiddle.net/XbcZv/" rel="nofollow noreferrer">my JSFiddle</a></strong>.</p> <p>In this example. I have connected first two div on DOM load.</p> <p>In this line of code</p> <p><strong>JSPlumb</strong></p> <pre><code>jsPlumb.connect ( { source: 'A', target: 'B', anchors: ["RightMiddle", "LeftMiddle"], paintStyle: { strokeStyle: "#ff9696", lineWidth: 8 }, connector: ["Flowchart", { curviness: 63}], connectorStyle: [{ lineWidth: 3, strokeStyle: "#5b9ada" }], hoverPaintStyle: { strokeStyle: "#2e2aF8", lineWidth: 8 } } ); </code></pre> <p>I am passing the Connector Style. </p> <p><strong>Query</strong> - I want to show the source and target endpoints as Green and Ping. Right now it is showing blue.</p> <p><br> <br> <br> <br></p> <p><strong>Original</strong></p> <p>I recently took over a development left incomplete by some other developer. In the project we need to be able to draw connectors between 2 elements. For that the original developer used <a href="http://jsplumbtoolkit.com/jquery/demo.html" rel="nofollow noreferrer">jsPlumb</a>. The library is working fine and producing results when I manually create a connector. But now what I want to do is create a connector dynamically. Reading jsPlumb's <a href="http://jsplumbtoolkit.com/doc/usage.html" rel="nofollow noreferrer">documentation</a> I tried to do it, but it is not producing the results that I want.</p> <p>This is how it is when I create manually (notice the color and the arrow at the target element) <img src="https://i.stack.imgur.com/4tplB.png" alt="enter image description here"></p> <p>But if I create it automatically I don't get this color and arrow. This is the <a href="http://jsfiddle.net/p42Zr/" rel="nofollow noreferrer">fiddle</a> that I created for testing. What I am doing is calling <code>jsPlumb.connect();</code> and passing the parameters.</p> <pre><code>jsPlumb.connect({ source: "page-1", target: "page-2", anchors: [ [1.06, 0.5, 0, 1], [-0.06, 0.5, 0, 0] ], endpoint: ["Dot", { radius: 4 }], endpointStyle: { fillStyle: "#5b9ada" }, setDragAllowedWhenFull: true, paintStyle: { fillStyle: "#5b9ada", lineWidth: 5 }, connector: ["Straight"], connectorStyle: [{ lineWidth: 3, strokeStyle: "#5b9ada" }], connectorOverlays: [ ["Arrow", { width: 10, length: 10, foldback: 1, location: 1, id: "arrow" }] ] }); </code></pre> <p>Can anyone point out where is the mistake?</p> <p>Regards</p> <p>Jehanzeb Malik</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload