Настройка фокуса ввода текста в цикле

Question

Мне нужно установить фокус на h: inputText, который находится в таком компоненте, как этот:

    <h:panelGroup id="bidView">
        <h:panelGroup rendered="#{some conditions}">            
            <h:outputText>
            Some text</h:outputText>                
            <p:inputText id="amountInput" value="#{bean.bidAmount}" />
            <h:commandButton value="Submit">
                <f:ajax listener="#{bean.submit(item)}" execute="@form" render="bidView "/>
            </h:commandButton>
        </h:panelGroup>
            <script>document.getElementById('amountInput').focus()</script>

    </h:panelGroup>

Вводимый текст, который должен получить фокус, - «amountInput».Код javascript, который, как я думал, должен сделать, это

<script>document.getElementById('amountInput').focus()

, но он генерирует следующую ошибку: «Cannon вызывает метод 'focus' of null."Что мне не хватает?

(Я должен добавить, что bidView отображается, когда пользователь нажимает кнопку «Отправить» рядом с каждой строкой в ​​таблице. Он, bidView, затем отображается под этой строкой, по которой щелкнули, и позволяет пользователю ввести число и получитьсервер обрабатывает его.)

Answer 1

document.getElementById() ожидает сгенерированный идентификатор клиента HTML, а не идентификатор компонента JSF.Вам нужно открыть страницу в браузере, сделать правый клик и Просмотреть исходный код , чтобы увидеть его самостоятельно.Найдите сгенерированный HTML <input> элемент <p:inputText> и используйте точно его id.К этому идентификатору добавляется идентификатор компонента каждого родительского компонента NamingContainer, например <h:form>, <h:dataTable>, <p:tabView> и т. Д.

Вы, похоже, используете PrimeFaces.Вы можете использовать функцию p:component() EL для печати идентификатора клиента данного идентификатора компонента.

<script>document.getElementById("#{p:component('amountInput')}").focus()</script>

Альтернативой, если вы не использовали PrimeFaces, является привязка компонента к представлению и использование UIComponent#getClientId().

<h:inputText id="amountInput" binding="#{amountInput}" value="#{bean.bidAmount}" />
...
<script>document.getElementById("#{amountInput.clientId}").focus()</script>

Возвращаясь к PrimeFaces, вам известно о компоненте <p:focus> ?Вы также можете использовать его.

<h:panelGroup id="bidView">
    <p:focus context="bidView" />
    ...
</h:panelGroup>