Селекторы jQuery в составных компонентах, почему это не работает?

Question

Я пытаюсь выбрать компонент JSF с помощью селектора jQuery. Составной компонент .xhtml и .js относительный код разделены, поэтому я прохожу cc.cliendId в переменных следующим образом:

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

И в * .js файл я пытаюсь использовать его следующим образом: $('[id="'+variables.formid+'"]') это работает и возвращает мне целый DIV, но следующий код не работает, он возвращает пустой объект []:

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

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

Функции, которая ускользает колон берутся из этого ответа: https://stackoverflow.com/a/4792023/947111

Если я пишу $("#" + "form\\:range_chooser"), range_chooser является идентификатором моего составного компонента, он работает.

Answer 1

Это не решит вашу конкретную проблему, но мне всегда было легче изменить символ разделителя на что-то не конфликтующее, чем на постоянное удаление идентификаторов. Вы можете сделать это, добавив параметр контекста в ваш Web.xml. то есть:

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

Я, вероятно, следует добавить, что если у вас есть двоеточие жёстко прописанные везде, вам придется вернуться назад и изменить все из них. Поэтому, в зависимости от вашей настройки, это может быть больше проблем, чем того стоит.

Редактировать

Если вам нужно оставить разделитель обугленных так оно и есть, вы должны быть в состоянии упростить этот яваскрипт немного:

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

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

работает для меня в любом случае.