Как обратиться к идентификатору компонента JSF в jquery?

Ответ 1

Вы можете предоставить все NamingContainer компоненты в виде, такие как <h:form>, <h:dataTable>, <ui:repeat>, <my:composite> фиксированный идентификатор, чтобы Идентификатор клиента с HTML-кодом надежно предсказуем. Если вы не уверены, просто откройте страницу в веб-браузере, щелкните правой кнопкой мыши и выберите "Просмотр источника". Если вы видите идентификатор с автогенерированием, например j_id123 в цепочке идентификаторов клиентов, то вам нужно точно указать этот компонент на фиксированный идентификатор.

В качестве альтернативы вы можете использовать #{component.clientId}, чтобы позволить EL распечатать идентификатор клиента компонента на сгенерированный вывод HTML. Вы можете использовать атрибут binding для привязки компонента к представлению. Что-то вроде этого:

<h:inputText binding="#{foo}" />
<script>
    var $foo = $("[id='#{foo.clientId}']"); // jQuery will then escape ":".
    // ...
</script>

Это требует только, чтобы script был частью файла вида.

В качестве еще одной альтернативы вы можете дать этому элементу имя класса:

<h:inputText styleClass="foo" />
<script>
    var $foo = $(".foo");
    // ...
</script>

Как еще одна альтернатива, вы можете просто передать сам элемент HTML DOM в функцию:

<h:inputText onclick="foo(this)" />
<script>
    function foo(element) {
        var $element = $(element);
        // ...
    }
</script>

Ответ 2

Проверьте Атрибут содержит селектор, если вы предпочитаете использовать идентификатор в качестве селектора. Затем вы можете сделать что-то вроде:

$('input[id*="mycomponentid"]').fadeIn();

Другой вариант - назначить отдельные классы CSS для компонентов, с которыми вам нужно взаимодействовать в jQuery. То есть.

$('.jsf-username-field').fadeIn();

Если вы используете более поздний подход, вы можете позволить фреймворку генерировать идентификаторы, и вам даже не нужно беспокоиться о них в большинстве случаев, особенно если вы используете красивую структуру AJAX-JSF. Я одобряю этот подход, потому что он не смешивает HTML/JavaScript с JSF.

Ответ 3

Идентификатор объекта состоит из идентификаторов его родителей. например form1:button1. Вы можете проверить, как они сгенерированы, и я думаю, что он не будет изменен (но вам лучше указать явные идентификаторы для всех родителей)

Ответ 4

Используйте UIComponent.getClientId, чтобы получить фактический идентификатор интересующего вас компонента.

Отобразите этот идентификатор на своей странице внутри фрагмента javascript (вызов функции js, переменная, что угодно), чтобы вы могли выбрать его с помощью jQuery.

Существуют различные способы использования EL на Facelet для достижения этого эффекта, но в основном это зависит от того, что вы хотите: например, однокомпонентный обработчик onclick или идентификатор случайного компонента в script, который выполняется в нижней части страница...

Ответ 5

JQuery может напрямую использовать идентификатор, заданный с помощью JSF-переменных.

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

  <c:set var="radioId" value="#{groupId}_#{Id}_radio"/>

Позже вы используете этот идентификатор для радиокнопки

И для script вы используете:

            <script type="text/javascript">
                $( "##{radioId}" ).change(function() {
                    alert( "radio changed" );
                });
            </script>

Это работает!