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

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

39 голосов
/ 28 октября 2011

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

Ответы [ 4 ]

81 голосов
/ 28 октября 2011

Вы должны понимать, что 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);
    // ...
}

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

6 голосов
/ 28 октября 2011

Вы также можете использовать jQuery «Атрибут содержит селектор» (вот 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 или инструменты разработчика или вид источника ...

Daniel.

2 голосов
/ 28 сентября 2017

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

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

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

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

0 голосов
/ 02 февраля 2016

enter image description here посмотрите, это поможет вам, когда я выберу опыт = Да, мое диалоговое окно с идентификатором dlg3 является popup.and, если значение Нет, оно не откроется

...