Colon (:) in id name when using jsplumb
I am using jsplumb and Primefaces. I have several p: panel components generated as part of the ui: repeat. Then I want to link these panels together using jsplumb. Primefaces generates panel ids and then I use them in my script code to set up jsplumb.
When I use the panel ID that I create, everything works fine, but I use the automatically generated panel ID.
<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 detected by checking the html page in the browser.
I think I traced the problem down to the fact that the generated ids contain ':'. For example, 'j_idt_29: 0'
How to bind ids with: in name inside jsplumb in string jsPlumb.connect({source:"element1"target:"element2"});
?
source to share
try avoiding :
with \\
(if that doesn't work try one \
)
jjsPlumb.connect({source:"j_idt20\\:0", target:"j_idt20\\:1"});
or
change the default JSF UINamingContainer delimiter as follows: context parameter in web.xml. For example.
<context-param>
<param-name>javax.faces.SEPARATOR_CHAR</param-name>
<param-value>-</param-value>
</context-param>
source to share
You need to run :
into lines. For this, Primefaces has a buil-in JavaScript function. You can follow these steps:
var escapedId = PrimeFaces.escapeClientId("id1:id2");
It will be screened correctly.
If you don't want to use this feature, for some reason exit :
with \\
:
"id1\\:id2"
source to share