Ответ 1
Вы должны понимать, что jQuery работает с деревом HTML DOM на стороне клиента. jQuery не работает напрямую с компонентами JSF, как вы написали в исходном коде JSF, но jQuery работает непосредственно с деревом HTML DOM, которое генерируется этими компонентами JSF. Вам нужно открыть страницу в веб-браузере и щелкнуть правой кнопкой мыши, а затем просмотреть источник. Вы увидите, что JSF добавляет идентификатор сгенерированных элементов ввода HTML к идентификаторам всех родительских компонентов NamingContainer (таких как <h:form>, <h:dataTable> и т.д.) С : качестве символа-разделителя по умолчанию. Так например
<h:form id="foo">
<p:selectManyCheckbox id="bar" />
...
будет в конечном итоге в сгенерированном HTML как
<form id="foo" name="foo">
<input type="checkbox" id="foo:bar" name="foo:bar" />
...
Вместо этого вам нужно выбрать элементы именно по этому идентификатору. Однако : - это специальный символ в идентификаторах CSS, представляющий псевдоселектор. Чтобы выбрать элемент с идентификатором : в идентификаторе с помощью селекторов CSS в jQuery, вам нужно либо экранировать его с помощью обратной косой черты, либо использовать селектор атрибута [id=...], либо просто использовать старый метод getElementById():
var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));
Если вы видите j_idXXX деталь j_idXXX в идентификаторе, где XXX представляет инкрементный номер, то вы должны присвоить конкретному компоненту фиксированный идентификатор, поскольку инкрементный номер является динамическим и может изменяться в зависимости от физической позиции компонента в дереве.
В качестве альтернативы вы также можете просто использовать имя класса:
<x:someInputComponent styleClass="someClassName" />
который заканчивается в HTML как
<input type="..." class="someClassName" />
так что вы можете получить его как
var $elements = $(".someClassName");
Это учитывает лучшую абстракцию и возможность повторного использования. Конечно, такие элементы не являются уникальными. Только основные элементы макета, такие как заголовок, меню, контент и нижний колонтитул, действительно уникальны, но они, в свою очередь, обычно уже не находятся в NamingContainer.
В качестве еще одной альтернативы, вы можете просто передать сам HTML-элемент DOM в функцию:
<x:someComponent onclick="someFunction(this)" />
function someFunction(element) {
var $element = $(element);
// ...
}
Смотрите также:
- Как я могу узнать идентификатор компонента JSF, чтобы я мог использовать в Javascript
- Как использовать сгенерированный JSF идентификатор элемента HTML с двоеточием ":" в селекторах CSS?
- По умолчанию JSF генерирует непригодные идентификаторы, которые несовместимы с CSS-частью веб-стандартов.
- Интеграция JavaScript в составной компонент JSF - чистый путь
