Как выбрать компоненты JSF с помощью jQuery?

Я пытаюсь реализовать 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();
    }  
});

Ответ 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);
    // ...
}

Смотрите также:

Ответ 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 или инструменты разработчика или вид источника...

Дэниел.

Ответ 3

Если вы используете RichFaces, вы можете проверить rich:jQuery comonent. Позволяет указать идентификатор на стороне сервера для компонента jQuery. Например, у вас есть компонент с указанным идентификатором сервера, тогда вы можете применить любой материал, связанный с jQuery, следующим образом:

<rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>

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

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

Ответ 4

посмотрите, это поможет вам, когда я выбираю опыт = Да, мой диалог, id которого является dlg3, является popup.and, если значение No, оно не откроется