JSF2, частичное обновление Ajax и повтор пользовательского интерфейса — отправка и обновление динамически добавляемых текстовых полей

#html #ajax #jsf-2 #validation

#HTML #ajax #jsf-2 #проверка

Вопрос:

У меня есть приложение JSF2 и страница со следующим кодом:

 <h:inputText id="someInput" required="true" />

<p:outputPanel id="itemsPanel">
    <ui:repeat var="i" value="#{myBean.itemIndices}" id="items">
        <h:inputText 
            id="itemInput" 
            value="#{myBean.dataItems[i]}" 
            />
        <h:panelGroup 
            layout="block" 
            styleClass="clear" 
            rendered="#{((i 1) % 10 == 0)}" 
            />
    </ui:repeat>
</p:outputPanel>
<br/>
<p:commandButton
    classStyle="btn" 
    value="Add Row"
    actionListener="#{myBean.increaseItemsCount}" 
    update="itemsPanel" 
    immediate="false"
    ajax="true"
    />
  

ui:repeat Выполняется динамическое отображение числа текстовых полей if в зависимости от свойств itemIndices и dataItems . Кнопка «Добавить строку» вызывает метод, который будет динамически увеличивать количество itemIndices и dataItems , поэтому появляются дополнительные текстовые вводы.

Текущий код не будет работать, если в текстовом поле нет значения someInput , потому что запрос AJAX также проверяет форму, и проверка завершается неудачей. Нажатие кнопки в этом случае не имеет никакого визуального эффекта, даже обратной связи для пользователя о том, что проверка не прошла (потому что я обновляю itemsPanel только).).

Если я изменю кнопку на have immediate="true" , то проблемы с проверкой больше не будет. К сожалению, я хочу иметь возможность восстановить значения динамических полей ввода, которые пользователь мог изменить перед добавлением новой строки. immediate="true" Атрибут приводит к тому, что форма не отправляется на сервер, поэтому введенные пользователем данные сохраняться не будут.

Возможным решением этого может быть добавление process="all dynamic input ids csv" атрибута к командной кнопке и возврат immediate атрибута к true . Это заставит сервер проверять только входные данные, указанные в атрибуте процесса, и они будут сохранены. Проблема здесь в том, что эти входные идентификаторы динамически генерируются JSF, и я не могу придумать правильный способ получить их в формате CSV. Я бы также не предпочел решение для динамической генерации идентификаторов, myBean полагаясь на предположения о том, как JSF будет их выводить.

Все предложения будут высоко оценены.

Комментарии:

1. да, старый добрый приятель Ceburashka

2. Какова область вашего компонента?

3. @mmanco Область просмотра, но это не то, что я собираюсь менять, потому что мне не нужен этот компонент для сохранения состояния. Кроме того, я не уверен, имеет ли область действия компонента какое-либо отношение к проблеме, с которой я сталкиваюсь. Тем не менее, если у вас есть какие-либо предложения по области видимости, не стесняйтесь поделиться ими.

Ответ №1:

Вы могли бы использовать process="itemsPanel" .

 <p:commandButton
    classStyle="btn" 
    value="Add Row"
    actionListener="#{myBean.increaseItemsCount}" 
    process="itemsPanel" 
    update="itemsPanel" 
    ajax="true"
    />
  

Вы должны переместить командную кнопку только в <h:outputPanel id="itemsPanel"> .

Комментарии:

1. Это работает, но только если я помещаю командную кнопку внутри панели элементов. Просто упомяните это в своем ответе, и я приму это. Спасибо 🙂

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

3.@IvayloSlavov Я столкнулся с аналогичной проблемой. Как ни странно, я заметил, что в основном сам компонент должен быть отправлен / обработан для вызова его ActionListener. В качестве альтернативы вы можете просто добавить @this в process process="itemsPanel, @this" в Primefaces