0

I try to select JSF component by using jQuery selector. Composite component .xhtml and .js relative code are separated, so I pass cc.cliendId in variables as following:

var variables = {};
variables.formid = "#{cc.clientId}";

And in *.js file I try to use it as following: $('[id="'+variables.formid+'"]') it works and returns me a whole div, but the following code doesn't work, it returns an empty object []: 

function escapeColons(selector) {
    return selector.replace(/(!|"|#|\$|%|\'|\(|\)|\*|\+|\,|\.|\/|\:|\;|\?|@)/g, function($1, $2) {
        return "\\\\" + $2;
    });
}

 $("#" + escapeColons(variables.formid))

The function which escapes colons is taken from this answer: https://stackoverflow.com/a/4792023/947111

If I write $("#" + "form\\:range_chooser"), range_chooser is a id of my composite component, it works.

Community
  • 1
  • 1
Anatoly
  • 5,056
  • 9
  • 62
  • 136

1 Answers1

1

This doesn't solve your concrete problem, but I've always found it easier to change the separator char to something non-conflicting than to constantly escape ids. You can do this by adding a context parameter to your Web.xml. ie:

<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>

I should probably add that if you have colons hardcoded everywhere, you'd have to go back and change all of those. So depending on your setup, it may be more trouble than it's worth.

Edit

If you need to leave the separator char the way it is, you should be able to simplify that javascript a bit:

function escapeColons(selector) {
    return selector.replace(/(!|"|#|\$|%|\'|\(|\)|\*|\+|\,|\.|\/|\:|\;|\?|@)/g,"\\$1");
}

$("#" + escapeColons(variables.formid))

Works for me anyway.

JammGamm
  • 151
  • 1
  • 5