Как выбрать компоненты JSF, используя jQuery?

Question

Я пытаюсь реализовать jQuery с компонентами PrimeFaces и JSF, но он не работает должным образом. Когда я пытался сделать то же самое с HTML-тегами, он работает правильно.

Вот код с тегами HTML, который правильно работает с jQuery:

<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText> 
<h:message for="checkbox" style="color:red" />

с

$("#check2").change(function() {
    if ($("#check2").is(":checked")) {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }
});

Вот код с PrimeFaces/JSF, который не работает должным образом с jQuery:

<p:selectManyCheckbox >
    <f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>

с

$("#rad").change(function() {
    if ($("#rad:checked").val() == "one") {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }  
});

Answer 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 часть в удостоверении личности, где 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 - чистый путь

Answer 2

Вы также можете использовать jQuery "Attribute Contains Selector" (вот URL http://api.jquery.com/attribute-contains-selector/)

Например, если у вас есть

 <p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/> 

и вы хотите сделать что-то на его объекте, вы можете выбрать его с помощью

jQuery('input[id*="quantity"]')

и если вы хотите напечатать его значение, вы можете сделать это

alert(jQuery('input[id*="quantity"]').val());

Чтобы узнать настоящий html-тег элемента, вы всегда можете посмотреть на настоящий html-элемент (в данном случае спиннер был переведен во ввод), используя firebug или инструменты разработчика или вид источника...

Дэниел.

Answer 3

Если вы используете RichFaces ты можешь проверить rich:jQuery comonent. Позволяет указать идентификатор стороны сервера для jQuery составная часть. Например, у вас есть компонент с указанным идентификатором сервера, тогда вы можете применить любой jQuery связанные вещи следующим образом: <rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>,

Для получения дополнительной информации, пожалуйста, проверьте doumentation.

Надеюсь, поможет.

Answer 4

посмотрите, это поможет вам, когда я выберу опыт = Да, мое диалоговое окно с идентификатором dlg3 всплывающее. и если значение Нет, он не откроется