Настройка свойства bean через D3.js [duplicate]

Вы должны понимать, что jQuery работает с деревом HTML DOM на стороне клиента. jQuery не работает непосредственно с компонентами JSF, как вы писали в исходном коде JSF, но jQuery работает непосредственно с деревом HTML DOM, которое создается этими компонентами JSF. Вам нужно открыть страницу в webbrowser и rightclick, а затем View Source . Вы увидите, что 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 в идентификаторе, где 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 с двоеточием ": & quot; в селекторах CSS?
• По умолчанию JSF генерирует неиспользуемые идентификаторы, которые несовместимы с частью CSS веб-стандартов
• Интеграция JavaScript в составном компоненте JSF, чистый путь