3

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?

partlov
  • 13,789
  • 6
  • 63
  • 82
ChillyMc
  • 173
  • 2
  • 9

2 Answers2

1

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>

How to use JSF generated HTML element ID in CSS selectors?

Community
  • 1
  • 1
Daniel
  • 36,833
  • 10
  • 119
  • 200
  • Thanks Daniel, I tried replacing : with // and / but this didn't work. I also tried the escapeClientId function suggested by partlov but this didn't work either but changing the default separator worked great. Cheers, – ChillyMc Jan 30 '13 at 00:24
0

You have to escape : sign in you strings. Primefaces has buil-in JavaScript function for this. You can do following:

var escapedId = PrimeFaces.escapeClientId("id1:id2");

It will be escaped properly.

If you don't want to use this function, for some reason, escape : with \\:

"id1\\:id2"
partlov
  • 13,789
  • 6
  • 63
  • 82