I am using jsplumb and Primefaces. I have a number of p:panel components generated as part of a ui:repeat. I then want to connect these panels together using jsplumb. Primefaces generates the panel ids and I then use these in the script code to setup jsplumb.
When I use a panel id that I create everything works fine but I I use a panel id created automatically no connectors appear.
<ui:repeat value={#mybean.nodes} var="node"> <p:panel> ... </p:panel> </ui:repeat>
jsPlumb.connect({source:"j_idt20:0", target:"j_idt20:1"});
where j_idt20:0 and j_idt20:1 are generated ids from Primefaces and found by inspecting html page on browser.
I think I've tracked the issue down to the fact that the generated ids contain ':'. For example 'j_idt_29:0'
How do I reference ids with : in the name within jsplumb in the jsPlumb.connect({source:"element1"target:"element2"}); line?
try to escape the : with \\ (if that wont work try single \)
jjsPlumb.connect({source:"j_idt20\\:0", target:"j_idt20\\:1"});
or
change the JSF default UINamingContainer separator by the following context param in web.xml. E.g.
<context-param>
<param-name>javax.faces.SEPARATOR_CHAR</param-name>
<param-value>-</param-value>
</context-param>