How to Add EndPoints using jsPlumb dynamically

[milind poundrik]

Hello

 
I am able to add EndPoints using jsPlumb and able to achive drag & drop connection between them.
 
Below is the code:
 
      jsPlumb.addEndpoint('shape002', {connectionsDetachable:true}, source ,target);

But here I have hard coded element name like shape002. so what syntex should be used so that any element like shape001, shape002 etc... can have EndPoints??

I dont want to make it hard coded like "shape002". 
 

 

Note: But all elements using same class name. Will it help?

 

Kidnly help.

Thanks & Regards,
Milind

[Simon Porritt]

I didn't realise your other post was directly to my email. Reposting here for everyone to see.

If you have jquery in the page you can use a selector, like, say

jsPlumb.addEndpoint($(".someClass"), { connectionsDetachable:true });

Remember that elements have to exist before you can add endpoints to them: if you use a selector like this, you won’t automatically get an endpoint on newly created elements.

Please do just use the groups in the future rather than emailing me questions directly.

[milind poundrik]

Thanks Simon for your quick response.

 

Scenario is : I am inserting new element to my page say shape5 , so I would like to have EndPoints to shape5 once I insert it to my page. So what should I do ?

Please guide me.

 

Thanks & Regards,

Milind

--
You received this message because you are subscribed to a topic in the Google Groups "jsPlumb" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsplumb/PWFfrPvBERE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsplumb+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[milind poundrik]

one more information:

I am using following libraries.

 

<SCRIPT  src="C:/Program Files/Test//lib/jquery.js"></SCRIPT>
<SCRIPT src="C:/Program Files/Test/jsplumb/jquery.jsPlumb-1.5.5.js"></SCRIPT>
<SCRIPT src="C:/Program Files/Test/lib/jquery-ui.js"></SCRIPT>

Is anything missing???

 

Regards,

Milind

[Simon Porritt]

Call addEndpoint on that element after you have added it.

[milind poundrik]

Hi Simon.

 

I am invoking script like below after adding element.

 jsPlumb.addEndpoint($("abc.shape.1"), {connectionsDetachable:true},source);  

 

 or

 

jsPlumb.addEndpoint($(".abc.shape.1"), {connectionsDetachable:true},source);     

 

both the way as mentioned above but still not adding endpoints to my element.

 

class name = abc.shape.1.

 

Kindly help.

 

Regards,

Milind

 

 

 

 

On Thu, Jul 10, 2014 at 4:49 PM, Simon Porritt <si...@jsplumbtoolkit.com> wrote:

Call addEndpoint on that element after you have added it.

--

[milind poundrik]

Hi Simon

I Got the problem.

 

Root cause: If you are using jQuery and having dots in your class name  like abc.shp.1 then it's going to create problem.

 

Solution: If your class has dots then use following representation:  $('.abc\\.shp\\.1')

 

Regards,

Milind