Connector Style not being applied to jsPlumb connector when created dynamically

Question

Update - 1

Here is my JSFiddle.

In this example. I have connected first two div on DOM load.

In this line of code

JSPlumb

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

I am passing the Connector Style.

Query - I want to show the source and target endpoints as Green and Ping. Right now it is showing blue.

Original

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 jsPlumb. 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 documentation I tried to do it, but it is not producing the results that I want.

This is how it is when I create manually (notice the color and the arrow at the target element)

But if I create it automatically I don't get this color and arrow. This is the fiddle that I created for testing. What I am doing is calling jsPlumb.connect(); and passing the parameters.

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"
        }]
    ]
});

Can anyone point out where is the mistake?

Regards

Jehanzeb Malik

Answer 1

Since the jsPlumb documentation is imho a mess, I'm kinda surprised that this kind of question doesn't come up more often within stackoverflow. Here is what was amiss:

paintStyle.fillStyle doesn't seem to be around anymore... non of the demos use it, but the documentation still referes to it whenever paintStyle is defined within a connect-call. Strange, but strokeStyle does the job perfectly.

    paintStyle: {
        strokeStyle: "#5b9ada",
        lineWidth: 3
    },

What I would suggest beyond that (even though if you change that line, everything will work) is to call jsPlumb on jsPlumb.ready

    jsPlumb.bind("ready", function() { // your connection code here... });

See the updated fiddle: http://jsfiddle.net/p42Zr/5/

EDIT:

The question was changed between loading the page and my answer, which i didn't notice. The answer up until here deals with the ORIGINAL.

The problem with the other fiddle is a bit different, what happens is that jsPlumb creates new Endpoints on top of the already defined ones. There are two ways of changing that. Retrieve the endpoints from var myendpoint = jsPlumb.addEndpoint( ... ) and use this variable later on to connect them. The easier way in this case though is to add endpoint: ["Blank"] to the options. (EDIT) Setting the endpoint-Style to "Blank" means no endpoints will be drawn, which results in a connection and the two previously defined endpoints as wanted (/EDIT). See the updated fiddle: http://jsfiddle.net/XbcZv/1/

EDIT To answer a question which came up in the comments: How can I show the pointer-cursor on the connections?

Simply add:

._jsPlumb_connector {
    cursor: pointer;
}

/EDIT to your css. For css changes on Endpoints edit the css class _jsPlumb_endpoint.

Answer 2

Set endpoint's style may solve the problem.

Endpoint's connectorStyle is a top priority. So if you have set endpoint's connectorStyle, then your connector's paintstyle will not work.

jsplumb's set paint style source code in connector.js:

        this.setPaintStyle(this.endpoints[0].connectorStyle || 
                       this.endpoints[1].connectorStyle || 
                       params.paintStyle || 
                       _jsPlumb.Defaults.PaintStyle || 
                       jsPlumb.Defaults.PaintStyle, true);