Как я могу узнать идентификатор компонента JSF, чтобы я мог использовать в Javascript - PullRequest
Новая
       59

Как я могу узнать идентификатор компонента JSF, чтобы я мог использовать в Javascript

41 голосов
/ 18 мая 2011

Проблема: Иногда вам захочется получить доступ к компоненту из javascript с помощью getElementById, но идентификаторы генерируются динамически в JSF, поэтому вам нужен метод получения идентификатора объекта.Ниже я отвечу, как вы можете это сделать.

Оригинальный вопрос: Я хочу использовать некоторый код, как показано ниже.Как мне сослаться на JSF-компонент inputText в моем Javascript? 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <head>
       <title>Input Name Page</title>
        <script type="javascript" >
          function myFunc() {
            // how can I get the contents of the inputText component below          
            alert("Your email address is: " + document.getElementById("emailAddress").value);
          }
       </script>
    </head>
    <h:body>
        <f:view>
            <h:form>
                Please enter your email address:<br/>
                <h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
                <h:commandButton onclick="myFunc()" action="results" value="Next"/>
            </h:form>
        </f:view>
    </h:body>
</html>

Обновление : в этом посте Идентификаторы клиента в JSF2.0 обсуждается с использованием техникинапример: 

<script type="javascript" >
  function myFunc() {
    alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value);
  }
</script>

<h:inputText id="myInptTxtId" value="backingBean.emailAddress"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>

Предполагается, что атрибут id в компоненте inputText создает объект, к которому можно получить доступ с помощью EL с использованием #{myInptTxtId}, в приведенном выше примере.Далее в статье утверждается, что JSF 2.0 добавляет метод getClientId() с нулевым аргументом к классу UIComponent.Тем самым позволяя предложенной выше конструкции #{myInptTxtId.clientId} получить фактический сгенерированный идентификатор компонента.

Хотя в моих тестах это не сработало.Может ли кто-нибудь еще подтвердить / опровергнуть.Ответы, предложенные ниже, страдают от недостатка, которого нет у вышеупомянутой техники.Так что было бы хорошо узнать, работает ли вышеуказанная техника на самом деле.

Ответы [ 6 ]

56 голосов
/ 18 мая 2011

Вам необходимо использовать именно тот идентификатор, который JSF назначил в сгенерированном выводе HTML.Щелкните правой кнопкой мыши страницу в веб-браузере и выберите Просмотр источника .Это именно тот HTML-код, который видит JS (вы знаете, JS запускается в веб-браузере и перехватывает дерево HTML DOM).

Учитывая 

<h:form>
    <h:inputText id="emailAddresses" ... />

Это будет выглядеть примерно так: 

<form id="j_id0">
    <input type="text" id="j_id0:emailAddress" ... />

Где j_id0 - сгенерированный идентификатор сгенерированного элемента HTML <form>.

Вы бы предпочли дать всем компонентам JSF NamingContainer фиксированныйid чтобы JSF не генерировал их автоматически.<h:form> является одним из них. 

<h:form id="formId">
    <h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>

Таким образом, форма не получит автоматически сгенерированный идентификатор, такой как j_id0, а поле ввода получит фиксированный идентификатор formId:emailAddress.Затем вы можете просто ссылаться на него в JS. 

var input = document.getElementById('formId:emailAddress');

С этого момента вы можете продолжать использовать код JS как обычно.Например, получение значения через input.value.

См. Также:

Обновление согласно вашему обновлению: вы неправильно поняли статью блога.Специальная ссылка #{component} относится к компоненту current , где вычисляется выражение EL, и это работает только внутри любого из атрибутов самого компонента.Все, что вы хотите, также может быть достигнуто следующим образом: 

var input = document.getElementById('#{emailAddress.clientId}');

с (обратите внимание на binding для представления, вы должны абсолютно не связывать его с бобом) 

<h:inputText binding="#{emailAddress}" />

но это ужасно.Лучше использовать следующий подход, в котором вы передаете сгенерированный HTML-элемент DOM как JavaScript this ссылку на функцию 

<h:inputText onclick="show(this)" />

с 

function show(input) {
    alert(input.value);
}

Если вы используете jQuery, вы можетедаже сделайте шаг вперед, абстрагируя их, используя класс стилей в качестве интерфейса маркера 

<h:inputText styleClass="someMarkerClass" />

с 

$(document).on("click", ".someMarkerClass", function() {
    var $input = $(this);
    alert($input.val());
});
6 голосов
/ 20 мая 2011

Ответ: Так что эта техника мне больше всего нравится.Не требуется делать слишком много странных вещей, чтобы выяснить id компонента.Помните, что весь смысл этого в том, чтобы вы могли узнать id компонента из любой точки вашей страницы, а не просто из самого компонента.Это ключ.Я нажимаю кнопку, запускаю функцию javascript, и он должен иметь возможность доступа к любому другому компоненту, а не только к тому, который его запустил.

Это решение не требует каких-либо правнажмите 'и посмотрите, что это за идентификатор.Решение такого типа хрупкое, так как идентификатор генерируется динамически, и если я изменю страницу, мне придется каждый раз проходить через эту ерунду.

  1. Привязать компонент к компоненту поддержки.

  2. Ссылка на связанный компонент, где вы хотите.

Итак, вот пример того, как это можно сделать.

Допущения: у меня есть страница * .xhtml (может быть * .jsp), и я определил компонент поддержки.Я также использую JSF 2.0.

*. Xhtml page 

<script>
  function myFunc() {
    var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")                 
    alert("The email address is: " + inputText.value );
  }
</script>

<h:inputText binding="#{backBean.emailAddyInputText}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>

BackBean.java 

UIInput emailAddyInputText;

Убедитесь, что создали свой метод получения / установки для этого свойстватоже.

4 голосов
/ 18 мая 2011

Идентификатор генерируется динамически, поэтому вы должны определить имена для всех родительских элементов, чтобы избежать j_id123-подобных идентификаторов.

Обратите внимание, что если вы используете jQuery для выбора элемента, то вам следует использовать двойную косую черту перед двоеточием: 

    jQuery("my-form-id\\:my-text-input-block\\:my-input-id")

вместо: 

    jQuery("my-form-id:my-text-input-block:my-input-id")

В случае Richfaces вы можете использовать выражение el на странице jsf: 

    #{rich:element('native-jsf-input-id')}

для выбора элемента javascript, например:

    #{rich:element('native-jsf-input-id')}.value = "Enter something here";
0 голосов
/ 11 декабря 2018 
<h:form  id="myform">
 <h:inputText  id="name" value="#{beanClass.name}" 
                a:placeholder="Enter Client Title"> </h:inputText>
</h:form>

Это небольшой пример JSF. Теперь я напишу код JavaScript, чтобы получить значение указанного выше компонента jsf: 

    var x = document.getElementById('myform:name').value; //here x will be of string type

   var y= parseInt(x,10); //here we converted x into Integer type and can do the 
                           //arithmetic operations as well
0 голосов
/ 10 мая 2013

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

<h:inputText id="emailAddresses" class="emailAddressesForSelector"...

В вашем JavaScript: 

jQuery('.emailAddressesForSelector');

Конечно, вам все равно придется вручную управлять уникальностью имени класса. Я думаю, что это ремонтопригодно, если вы не используете это в повторно используемых компонентах. В этом случае вы можете генерировать имена классов, используя соглашение.

0 голосов
/ 18 мая 2011

Вы можете просмотреть исходный HTML-код, когда он сгенерирован, и посмотреть, какой идентификатор установлен, так что вы можете использовать его в своем JavaScript. Поскольку он находится в форме, он, вероятно, добавляет к нему идентификатор формы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...